javascript - 如何创建倾斜(不水平)的幻灯片？

Question

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

Answer 1

CSS3 有一个可以设置的 rotate 属性。在您的样式表中，它看起来像这样:

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

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

一些浏览器使用 vendor 前缀支持它，这意味着它是实验性的，但您仍然可以将它们包含在您的样式表中。

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 算出 Angular !我提供的 Angular 应该是 45 度)

但是，即使那样您也不能确定用户的浏览器是否支持它，而且您可能还需要处理其他问题。

当然，由于屏幕上的像素化​​，旋转元素的质量也会下降。严重程度取决于浏览器旋转算法的质量，但总会有一些质量损失。

简而言之，浏览器中的旋转(至少目前如此)与其说是一项有用的功能，不如说是一种玩物。但这是可以做到的。