我将如何在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会导致图像元素被转换为溢出其原始边界，您可能需要设置边距/在元素周围填充，以便它不会阻碍周围的内容。