CSS3变形歪斜

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

使用CSS的新的转换属性？

正如你所看到的，我试图扭曲两个angular落，谁知道这是可能的？

Answer 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/349×9/

这可能有帮助： http : //jsfiddle.net/rudiedirkx/349×9/2880/

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

Answer 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

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

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

万一你想要，使用matrix3d。

  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 8

另外2种方法：

1. 正如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/349×9/3112/

2. 使用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/349×9/3113/