CSS变换倾斜

是否有人知道如何实现这样的倾斜：

使用CSS的新转换属性

---

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

我想你是说webkit变换。。请检查此URL 它可以帮助您。

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:

​

在Chrome和FF 4中工作：

这可能有助于：

---

这也是（来自Erwinus的评论）：

您可以同时使用-webkit透视图和-webkit转换

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

这只适用于Safari

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

然后是HTML：

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

从

.size{
宽度：200px；
高度：200px；
}
.boxContainer{
-webkit透视图：100；
}
.盒子{
背景：蓝色；
-webkit-transform-origin-x:0；
-webkit变换：旋转（10度）；
}

---

这对我很有用。

使用此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);

---

如果需要，请使用矩阵3d

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

还有两种方法：

如上所示，您可以使用

边框

：

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

但它不能有内容，因为它都是边界

例如：

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

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

例如：

---

这不是扭曲，也不会扭曲内容。是的。这是一个黑客。它也不适用于具有背景颜色/图像的背景：什么是

内容：“\0020”do？20（十六进制，32十二进制）是一个空格。现在你可以用“”了。我认为不需要字符。在这个例子中，我看到两个矩形和一个梯形。如果情况如示例中所示，为什么不使用三种形状？这应该是评论，而不是回答。请不要只发布问题的链接答案。
#box {
  border-left: 200px solid black;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  width: 0;
  height: 100px;
}

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