如何将图片对角放置在页面上，以便图片能够提醒钻石的形状？

Question

如何将图片放在页面上，而不是垂直或水平放置，而是对角放置，以便图片能够提醒钻石的形状？

是否可以在HTML中使用？

Answer 1

您可以使用CSS3 transform property，但在9以下的IE中不支持将图像旋转45度。

Answer 2

您可以使用CSS3转换作为解决方案：

.rotate_7deg_class {
    transform:rotate(7deg);
    -ms-transform:rotate(7deg); /* IE 9 */
    -moz-transform:rotate(7deg); /* Firefox */
    -webkit-transform:rotate(7deg); /* Safari and Chrome */
    -o-transform:rotate(7deg); /* Opera */    
}

此版本不支持IE的较低版本。

或者，您可以创建一个PHP脚本，该脚本以动态方式生成图像的旋转版本，但这有点难度。

Answer 3

有两种方法：

• 使用CSS3变换旋转图片。它不需要图像编辑但与某些浏览器不兼容（例如：IE）

• 在图片编辑器（GIMP，Photoshop等）中旋转图片，并为其提供透明背景。