CSS 变换倾斜

CSS Transform Skew

提问by realph

Does anyone know how to achieve skew like this:

有谁知道如何实现这样的倾斜：

Using CSS's new transform property?

使用 CSS 的新转换属性？

As you can see I'm trying to skew both corners, anyone know if this is possible?

正如你所看到的，我试图倾斜两个角，有人知道这是否可能吗？

采纳答案by Rudie

CSS:

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: "
<div id=box></div>?
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:

HTML：

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

Works in Chrome and FF 4: http://jsfiddle.net/rudiedirkx/349x9/

适用于 Chrome 和 FF 4：http: //jsfiddle.net/rudiedirkx/349x9/

This might help: http://jsfiddle.net/rudiedirkx/349x9/2880/

这可能会有所帮助：http: //jsfiddle.net/rudiedirkx/349x9/2880/

And this too (from Erwinus' comment): http://css-tricks.com/examples/ShapesOfCSS/

这也是（来自 Erwinus 的评论）：http://css-tricks.com/examples/ShapesOfCSS/

回答by Stieve Hansen

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

Then HTML:

然后是 HTML：

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

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

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

回答by JungJik Lee

I think you mean webkit transform.. please check this URL out http://www.the-art-of-web.com/css/3d-transforms/it could help you.

我想你的意思是 webkit 转换 .. 请检查这个 URL http://www.the-art-of-web.com/css/3d-transforms/它可以帮助你。

回答by jz1108

You can use -webkit-perspective and -webkit-transform together.

您可以同时使用 -webkit-perspective 和 -webkit-transform。

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

This works only in Safari.

这仅适用于 Safari。

回答by wp student

Use this css code. Set the numbers according to your need

使用此 css 代码。根据您的需要设置数字

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

回答by Logo

Just in case you want, use matrix 3d.

以防万一，请使用矩阵 3d。

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

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

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

回答by Rudie

2 more methods:

2种方法：

1. As seen on https://css-tricks.com/examples/ShapesOfCSS/#trapezoidyou can use border:

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

   but it can't have contents, because it's all border.

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

2. Use CSS' actual 'skew' transform:

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

   I can't seem to position the pseudo element behind the main element though, so the pseudo actually falls over the main element's content, if any.

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

1. 如https://css-tricks.com/examples/ShapesOfCSS/#trapezoid 所示，您可以使用border：

   #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/3112/

2. 使用 CSS 的实际 'skew' 变换：

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

   我似乎无法将伪元素放置在主元素后面，所以伪元素实际上落在了主元素的内容上（如果有的话）。

   示例：http: //jsfiddle.net/rudiedirkx/349x9/3113/

回答by Isaac Alger

##代码##

This worked for me.

这对我有用。