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

Question

我想采取这样的措施：

并将其塑造成这样的东西：

仅使用 CSS。我知道 CSS 转换，但我不确定使用哪个。偏斜似乎不对，翻译也不对。

Answer 1

我建议将 rotateX、perspective 和 scaleY 属性组合用于 CSS3 变换：

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