我会如何在CSS中像这样转换？

Question

我想利用这样的事：

和它的形状，以这样的：只使用CSS

。我知道CSS转换，但我不确定要使用哪个。倾斜似乎并不正确，翻译也没有。

Answer 1

我建议使用rotateX的组合，对CSS3透视和scaleY属性变换：

img { 
    -moz-transform: perspective(600px) rotateX(45deg) scaleY(1.3); 
    -o-transform: perspective(600px) rotateX(45deg) scaleY(1.3); 
    -webkit-transform: perspective(600px) rotateX(45deg) scaleY(1.3); 
    transform: perspective(600px) rotateX(45deg) scaleY(1.3); 
} 

要调整如何倾斜侧面是，可以增加或沿着X轴减小旋转的程度。

如果您不希望图像因观察者倾斜而出现过于平坦，则需要使用scaleY属性。

在这里看到的小提琴 - http://jsfiddle.net/teddyrised/GsZvE/或下面的代码片断：

body { 
 
    padding: 50px; 
 
} 
 
img { 
 
    -moz-transform: perspective(600px) rotateX(45deg) scaleY(1.3); 
 
    -o-transform: perspective(600px) rotateX(45deg) scaleY(1.3); 
 
    -webkit-transform: perspective(600px) rotateX(45deg) scaleY(1.3); 
 
    transform: perspective(600px) rotateX(45deg) scaleY(1.3); 
 
}

<img src="http://i.stack.imgur.com/sXMjN.png" />

[编辑]：为了完整性的缘故，由于这样的事实，使用perspective会造成图像元件要进行变形，使其溢出原始边界，则可能需要在元素周围设置边距/填充，以便不会妨碍周围的内容。