CSS Transform Skew

Ответ 1

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>​

Работает в Chrome и FF 4: http://jsfiddle.net/rudiedirkx/349x9/

Это может помочь: http://jsfiddle.net/rudiedirkx/349x9/2880/

И это тоже (из комментария Эрвинуса): http://css-tricks.com/examples/ShapesOfCSS/

Ответ 2

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

Затем HTML:

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

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

Ответ 3

Я думаю, вы имеете в виду преобразование webkit.. пожалуйста, проверьте этот URL-адрес http://www.the-art-of-web.com/css/3d-transforms/ он может вам помочь.

Ответ 4

Вы можете использовать -webkit-perspective и -webkit-transform вместе.

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

Это работает только в Safari.

Ответ 5

Используйте этот код css. Задайте номера в соответствии с вашими потребностями

-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);

Ответ 6

На всякий случай, если хотите, используйте матрицу 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

Ответ 7

.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>

Это сработало для меня.

Ответ 8

Еще 2 метода:

• Как видно на https://css-tricks.com/examples/ShapesOfCSS/#trapezoid, вы можете использовать border:

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

  но он не может иметь содержимого, потому что все границы.

  Пример: http://jsfiddle.net/rudiedirkx/349x9/3112/

• Использовать фактическое преобразование CSS:

  #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? */
  }
  

  Я не могу позиционировать псевдоэлемент за основным элементом, хотя, таким образом, псевдо действительно падает на содержимое основного элемента, если оно есть.

  Пример: http://jsfiddle.net/rudiedirkx/349x9/3113/