CSS3 Transform Skew

quelqu'un sait-il comment faire pour obtenir l'inclinaison comme ceci:

utilisation de la nouvelle propriété transform de CSS?

comme vous pouvez le voir, j'essaie d'emboîter les deux coins, quelqu'un sait si c'est possible?

37
demandé sur Harry 2011-03-14 04:06:42

8 réponses

CSS:

#box {
    width: 200px;
    height: 200px;
    background: black;
    position: relative;
    -webkit-transition: all 300ms ease-in;
}
#box:hover {
    -webkit-transform: rotate(-180deg) scale(0.8);
}
#box:after, #box:before {
    display: block;
    content: "20";
    color: transparent;
    width: 211px;
    height: 45px;
    background: white;
    position: absolute;
    left: 1px;
    bottom: -20px;
    -webkit-transform: rotate(-12deg);
    -moz-transform: rotate(-12deg);
}
#box:before {
    bottom: auto;
    top: -20px;
    -webkit-transform: rotate(12deg);
    -moz-transform: rotate(12deg);
}​

HTML:

<div id=box></div>​

Fonctionne dans Chrome et FF 4: http://jsfiddle.net/rudiedirkx/349x9/

Cela peut vous aider: http://jsfiddle.net/rudiedirkx/349x9/2880/

Et ce trop (à partir de Erwinus' commentaire): http://css-tricks.com/examples/ShapesOfCSS/

10
répondu Rudie 2014-12-24 17:57:22
.red.box {
  background-color: red;
  transform: perspective( 600px ) rotateY( 45deg );
}

puis HTML:

<div class="box red"></div>

http://desandro.github.com/3dtransforms/docs/perspective.html

31
répondu Stieve Hansen 2015-12-22 20:58:14

je pense que vous voulez dire WebKit transform.. s'il Vous Plaît vérifier cette URL http://www.the-art-of-web.com/css/3d-transforms/ il pourrait vous aider.

10
répondu JungJik Lee 2011-03-14 01:10:31

Vous pouvez utiliser-webkit-perspective et-webkit-transformer ensemble.

<div style="-webkit-perspective:300;">
<div style="-webkit-transform:rotate3d(0, 1, 0, 30deg);width:200px;height:200px;background:#D73913;"></div>
</div>

cela ne fonctionne qu'en Safari.

6
répondu jz1108 2011-06-22 04:18:34

Utilisez ce code css. Réglez les nombres en fonction de vos besoins

-webkit-transform: translateX(16em) perspective(600px) rotateY(10deg);
-moz-transform: translateX(16em) perspective(600px) rotateY(10deg);
-ms-transform: translateX(16em) perspective(600px) rotateY(10deg);
-o-transform: translateX(16em) perspective(600px) rotateY(10deg);
transform: translateX(16em) perspective(600px) rotateY(10deg);
3
répondu wp student 2014-03-02 10:42:53

Juste au cas où vous le souhaitez, utiliser la matrice 3d.

  transform:matrix3d(
  1,0,1,0.003,
  0,1,0,0,
  0,0,1,0,
  0,0,0,1);

http://codepen.io/Logo/pen/jEMVpo

1
répondu Logo 2014-12-24 08:03:15
.size{
   width: 200px;
   height: 200px;           
}
.boxContainer{
  -webkit-perspective:100;
}
.box{
  background: blue;
  -webkit-transform-origin-x:0;
  -webkit-transform: rotateY(10deg);
}


    <div class="size boxContainer">
        <div class="size box">

        </div>
    </div>

Cela a fonctionné pour moi.

0
répondu Isaac Alger 2013-04-18 01:18:29

2 méthodes:

  1. comme vu sur https://css-tricks.com/examples/ShapesOfCSS/#trapezoid Vous pouvez utiliser border:

    #box {
      border-left: 200px solid black;
      border-top: 50px solid transparent;
      border-bottom: 50px solid transparent;
      width: 0;
      height: 100px;
    }
    

    mais il ne peut pas y avoir de contenu, parce que tout est à la frontière.

    Exemple: http://jsfiddle.net/rudiedirkx/349x9/3112/

  2. Utiliser les CSS réelle de l'inclinaison transformer:

    #box {
      width: 200px;
      height: 170px;
      margin-top: 30px;
      background-color: black;
      transform: skewY(10deg);
      position: relative;
      z-index: 1; /* doesn't work? */
    }
    #box:before {
      content: "";
      display: block;
      width: 200px;
      height: 80px;
      position: absolute;
      bottom: -40px;
      left: 0;
      background-color: black;
      transform: skewY(-20deg);
      z-index: -1; /* doesn't work? */
    }
    

    Je n'arrive pas à positionner le pseudo-élément derrière l'élément principal, donc le pseudo tombe sur l'élément principal du contenu, le cas échéant.

    Exemple: http://jsfiddle.net/rudiedirkx/349x9/3113/

0
répondu Rudie 2015-11-11 22:02:06