当前位置：文江博客话题详情

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

发布于 2024-09-26 08:24:07 字数 116 浏览 6 评论 0原文

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

我想要实现的目标的屏幕截图

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

拍不死你 2024-10-03 08:24:07

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 度）

但是，即使如此，您也无法确定用户的浏览器是否正确会支持它，并且您可能还需要处理其他怪癖。

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

简而言之，浏览器中的旋转（至少目前如此）更多的是一种玩物，而不是一个有用的功能。但这是可以做到的。

CSS3 has a rotate property which you can set. In your stylesheet, it would look something like this:

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

However, it's quite new and it's got fairly limited browser support at the moment, so it's not ideal.

Some browsers support it using vendor prefixes, which means it's experimental, but you could include them in your stylesheet anyway.

Microsoft Internet Explorer has a completely different mechanism for rotation.

Your final stylesheet might look something like this:

#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 */
}

(You'll need to work out the angles yourself for IE! the one I've provided should be okay for 45 degrees)

However, even then you can't be certain that the user's browser will support it, and there may be other quirks you'd need to deal with.

Also, of course, a rotated element will be degraded in quality due to pixellisation on screen. How badly will depend on the quality of the browser's rotation algorithms, but there will always be some loss of quality.

In short, rotation in a browser (for the time being at least) is more of a play-thing than a useful piece of functionality. But it can be done.

回复收藏 0 原文