如何创建倾斜（非平整）幻灯片？

Question

有没有办法创建一个旋转5°的图像幻灯片？我更喜欢非闪存解决方案。谢谢！

Answer 1

您可以将其与CSS transformations一起使用，但它不适用于所有浏览器。

修改： Here's a solution声称可以跨浏览器工作。

Answer 2

CSS3具有rotate属性，您可以设置该属性。在样式表中，它看起来像这样：

#mydiv {
    transform: rotate(45deg);
}

但是，它很新，而且目前浏览器支持相当有限，所以它并不理想。

有些浏览器使用供应商前缀支持它，这意味着它是实验性的，但无论如何你都可以将它们包含在样式表中。

Microsoft Internet Explorer具有完全不同的轮换机制。

您的最终样式表可能如下所示：

#mydiv {
    -ms-transform: rotate(45deg); /* IE9 beta? */
    -moz-transform: rotate(45deg);  /* FF3.5+ */
    -o-transform: rotate(45deg);  /* Opera 10.5 */
    -webkit-transform: rotate(45deg);  /* Saf3.1+, Chrome */
    transform: rotate(45deg);  /* CSS3 (for when it gets supported) */
    filter: progid\:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
}

（你需要自己为IE设计角度！我提供的角度应该可以达到45度）

然而，即便如此，您也无法确定用户的浏览器是否会支持它，并且您可能还需要处理其他问题。

当然，由于屏幕上的像素化​​，旋转元件的质量会降低。取决于浏览器旋转算法的质量有多糟糕，但总会有一些质量下降。

简而言之，在浏览器中旋转（至少暂时）更像是一种游戏，而不是一种有用的功能。但它可以做到。