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

有没有办法创建一个图片幻灯片，旋转5°？我更喜欢非闪存解决方案。谢谢！如何创建倾斜的（不平整的）幻灯片？

Screenshot of what I want to achive

2010-10-01 Christoph

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度好起来）

然而，即使这样，你也无法确定用户的浏览器是否支持它，并且可能还有其他的怪癖需要处理。

此外，由于屏幕上的像素化，旋转的元件当然会因质量而降低。如何严重取决于浏览器的旋转算法的质量，但总会有一些质量损失。

简而言之，浏览器中的旋转（至少暂时）比游戏中的有用功能更重要。但这是可以完成的。

来源

2010-10-01 12:34:54 Spudley

你应该有标准的执行*最后*，以便它会覆盖旧的浏览器特定的时候出来 – 2010-10-01 12:36:46

@Yi姜 - 真的，虽然实际上在这种情况下，我发现你有*把* IE特定的filter（）变体最后，因为它们的语法可能会导致其他浏览器的CSS解析器出错，从而导致后续样式被忽略（您不知道需要多长时间才能调试！：-o） – Spudley 2010-10-01 12:40:32

谢谢，我会尝试你的解决方案，看看旋转时看起来很酷的设计，如果没有，就不会吸吮。 – Christoph 2010-10-04 14:02:15

您可以用CSS transformations使用它，但它不会在所有的浏览器。

编辑：Here's a solution声称工作跨浏览器。

来源

2010-10-01 12:30:00 Skilldrick

+1为惊人的IE解决方案。 – 2010-10-01 12:51:46

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

回答

相关问题