CSS 变换倾斜

Question

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

使用 CSS 的新转换属性？

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

Answer 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

Answer 2

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/

Answer 3

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

Answer 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。

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

Answer 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

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

这对我有用。

Answer 8

另外 2 种方法：

1. 如 https://css-tricks.com/examples/ 所示ShapesOfCSS/#trapezoid 你可以使用边框：

   <前><代码>#box {
   左边框：200px 纯黑；
   顶部边框：50px 实心透明；
   border-bottom: 50px 实心透明;
   宽度：0；
   高度：100px；
   }

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

   示例：http://jsfiddle.net/rudiedirkx/349x9/3112/< /p>

2. 使用CSS 的实际“倾斜”变换：

   <前><代码>#box {
   宽度：200px；
   高度：170 像素；
   顶部边距：30px；
   背景颜色：黑色；
   变换：skewY(10deg)；
   位置：相对；
   z 索引：1； /* 不起作用？ */
   }
   #框：之前{
   内容： ””;
   显示：块；
   宽度：200px；
   高度：80像素；
   位置：绝对；
   底部：-40px；
   左：0；
   背景颜色：黑色；
   变换：skewY(-20deg)；
   z 索引：-1； /* 不起作用？ */
   }

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

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