CSS变换倾斜[重复]答案

【问题标题】：CSS Transform Skew [duplicate]CSS变换倾斜[重复]
【发布时间】：2011-07-14 16:54:21
【问题描述】：

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

使用 CSS 的新转换属性？

如您所见，我正在尝试倾斜两个角，有人知道这是否可能吗？

【问题讨论】：

【解决方案1】：

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

然后是 HTML：

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

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

【讨论】：

【解决方案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/

【讨论】：

【解决方案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>

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

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

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

【讨论】：

这不是歪斜的，也不是歪斜的内容。
是的。这是一个黑客。它也不适用于具有背景颜色/图像的背景：jsfiddle.net/rudiedirkx/349x9/411
content: "\0020"; 是做什么的？
20 (hex, 32 dec) 是一个空格。这些天你可以使用“”。我认为不需要字符。
在这种情况下，我看到两个矩形和一个梯形。如果是示例中的情况，为什么不使用三个形状？ css-tricks.com/examples/ShapesOfCSS

【解决方案4】：

以防万一，使用矩阵 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

【讨论】：

【解决方案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】：

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

这对我有用。

【讨论】：

【解决方案7】：

您可以同时使用 -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。

【讨论】：

【解决方案8】：

我认为您的意思是 webkit 转换.. 请检查此 URL http://www.the-art-of-web.com/css/3d-transforms/ 可以帮到你。

【讨论】：

这应该是评论，而不是答案。请不要发布仅链接的问题答案。