Transformation CSS Skew

Question

Quelqu'un sait-il comment obtenir une telle inclinaison ?

Utiliser la nouvelle propriété transformée de CSS ?

Comme vous pouvez le voir, j'essaie d'incliner les deux coins, quelqu'un sait-il si c'est possible ?

Answer 1

.red.box {
  background-color: red;
  transform: perspective( 600px ) rotateY( 45deg );
}

Puis HTML :

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

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

Answer 2

Je pense que vous voulez dire webkit transform s'il vous plaît vérifier cette URL out http://www.the-art-of-web.com/css/3d-transforms/ cela pourrait vous aider.

Answer 3

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: "\0020";
    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 pourrait aider : http://jsfiddle.net/rudiedirkx/349x9/2880/

Et ceci aussi (du commentaire d'Erwinus) : http://css-tricks.com/examples/ShapesOfCSS/

Answer 4

Vous pouvez utiliser conjointement -webkit-perspective et -webkit-transform.

<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 que dans Safari.

Answer 5

Utilisez ce code css. Définissez les chiffres 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);