我将如何在CSS中进行这样的转换？

Question

我想采取这样的事情:

并将其塑造成如下:

仅使用CSS.我知道CSS转换,但我不确定使用哪个.歪斜似乎不对,也没有翻译.

Answer 1

我建议为CSS3转换使用rotateX,perspective和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将导致图像元素被转换为溢出其原始边界的事实,您可能希望在元素周围设置边距/填充,以便它不妨碍周围的内容.