我将如何在 CSS 中进行这样的转换？ [复制]答案

【问题标题】：How would I go about transforming like this in CSS? [duplicate]我将如何在 CSS 中进行这样的转换？ [复制]
【发布时间】：2013-05-03 00:56:42
【问题描述】：

我想拿这样的东西：

然后把它塑造成这样的样子：

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

【问题讨论】：

标签： html css transform css-shapes

【解决方案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/ 或下面的代码 sn-p：

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);
}

&lt;img src="http://i.stack.imgur.com/sXMjN.png" /&gt;

[编辑]：为了完整起见，由于使用perspective 会导致图像元素被转换以使其溢出其原始边界，因此您可能需要设置一个边距/填充元素，使其不会阻碍周围的内容。

【讨论】：