使用CSS转换旋转元素

上的 

CSS转换-旋转

对于CSS缺乏进展,以及JavaScript和浏览器专用CSS都试图推动web设计的发展,我已经滔滔不绝了。我们喜欢的浏览器特定的CSS属性之一是CSS转换。CSS转换允许我们在360度轴上旋转元素。旋转元素也是轻而易举的事——看看吧。

Mozilla CSS

-moz变换:旋转(120度);

CSS属性表示为仅限Mozilla前缀为“-moz”。可以将图元旋转任意度数。您还可以使用“moz-transform-origin”属性设置变换的原点:

-moz变换:旋转(120度)-moz变换:倾斜(25度)平移(150px);

WebKit CSS

-webkit转换:旋转(120度);

显然网络工具包使用“-webkit”前缀。然而,转换语法是相同的。WebKit发起的CSS转换;Mozilla实现了WebKit标准。

歌剧CSS

-o变换:旋转(120度);

Opera使用其标准o(o)-前缀属性来表示转换。

Internet Explorer CSS

Microsoft已实施-毫秒转换的前缀:

-ms-变换:旋转(120度);

上面的CSS片段在IE9中运行良好,但IE8和更低版本需要一些滤波器魔法:

过滤器:progid:DXImageTransform。微软。基本图像(旋转=1.5);

不幸的是,这些过滤器非常不精确,不会可靠地旋转。

仅此而已。CSS转换并不新鲜,但每隔一段时间对其进行一次检查是很好的。到目前为止,我还没有在生产项目中使用CSS转换。也许你有一个现代CSS转换使用的好例子可以分享?

*注意:我确实注意到WebKit在支持旋转iFrame方面存在问题。Mozilla做得很好。

最近的功能

  • 5个很棒的新Mozilla技术—您’从未听说过

    我的2013 Mozilla峰会之旅令人难以置信。我花了太多时间专注于我的项目,以至于我忽略了所有Mozillian人所做的伟大工作。MozSummit完美地提醒了我的同事们有多聪明,以及他们有多。。。

  • CSS渐变

    使用CSS边界半径,我向您展示了CSS如何通过向元素添加圆角来弥合设计和开发之间的差距。CSS渐变是朝着这个方向迈出的另一步。现在,Internet Explorer 8+、Firefox、Safari和Chrome都支持CSS渐变。。。

令人难以置信的演示

  • 使用MooTools创建简单的幻灯片

    为任何网站增添活力的一个好方法是实现以图像或幻灯片内容为特色的幻灯片。当然,有很多可用的幻灯片放映插件,但如果你想在没有控件或事件的情况下进行简单的幻灯片放映,其中许多插件可能会被过度使用。

  • 轮廓设置为offset的控制元件轮廓位置

    我最近正在从事一个项目,该项目的特色是可以通过键盘导航的表格,因此很明显可以通过传统方式使用单元格大纲tabIndex=0元素轮廓是用户快速智能导航的重要组成部分。不幸的是,我遇到了Firefox 3.6的错误。。。

讨论

  1. 内特

    我只想指出Opera支持-o-transform。在CSS中有这样的属性是很好的,即使这意味着为了让它在跨浏览器中工作需要重新输入三次!

  2. 富有

    我通常将它们用作悬停事件,通常也用于转换。您还可以使用它们制作旋转木马类型的效果–请看css3.bradshawenterprises.com/demos中的两个示例。

    使用它们进行任何大型操作的缺点是,在没有支持的浏览器中,效果不会很好地降低,除非它们很小(例如悬停时的缩放比例为1.05)。

    举一个非我举的例子,panic的博客非常频繁地使用它们来稍微轮换每个博客帖子。

  3. 西蒙

    我试着只使用CSS发布一些真正漂亮的帖子。梯度和阴影都很棒,但旋转真的很痛苦。为什么?因为旋转元素中的所有文本几乎都是不可读的。我想浏览器仍然需要处理这个问题:旋转文本:/

  4. 是的,文本旋转的东西真的很糟糕,现在确实很难阅读。即使在Webkit Nightlies中,这也不理想。

  5. 珍妮

    我正在涂鸦一个JavaScript/mootools纸牌游戏。谢谢你的帖子——现在我可以扇卡片了:D

  6. 无法使用IE7

    我们必须使用这个…

    progid:DXImageTransform。微软。BasicImage(旋转=0)

    //旋转
    0 = 0º
    1 = 90º
    2 = 180º
    3 = 270º

    IE糟透了!

  7. @杜亚特:事实上,退房吧http://css3please.com/使用转换矩阵(查找box_rotate部分)获得更好的IE-only替代方案

  8. http://moo4q.com!

    我在那里用它们。

    至于IE DXImageTransform,我们可以说它的外观很难看。

  9. pSouper公司

    这是否意味着您可以通过旋转屏幕的当前页面来更改页面,从而显示下面的新页面(当然是使用ajaxa)

  10. 以斯拉

    知道如何将其应用于嵌入式youtube视频吗?我每次尝试都会拒绝显示对象。

  11. 拉科达

    对于旧iE浏览器中的旋转,您可以更好地使用矩阵变换过滤器。
    http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/

  12. 乔什(Josh)

    这里提到的IE的分数旋转实际上并不存在,只有整数0-3。

    要进行45度等旋转,必须使用矩阵平移…
    http://www.boogdesign.com/examples/transforms/matrix-calculator.html

  13. 旋转和文字同时换行怎么样?我有一个来自DB的文本。当文本太长时,一个单词会停留在另一个单词上。如何解决这个问题?

    谢谢你

  14. 卜拉欣

    我是个十足的笨蛋。你认为这种影响可以连接到一个滑块上,以便根据滑块值实时旋转演示文稿吗?框架的内容可以是单个图像吗?

    • 霍恩扎

      当然。这是可以做到的。从javascript控制CSS样式很容易(至少在jQuery中)。我从未构建过自定义滑块,但我想有多种现成的解决方案,包括jQueryUI。在最坏的情况下,您可以通过监听其滚动位置从溢出的div中提取一个。

  15. 我发现这些CSS规则可能非常脆弱,看似微不足道的更改可能会阻止这些工作。像很多开发人员一样,我发现有一个快速参考来帮助我进行css轮换真的很有用。找到了这个有用的网站,它有一个用于CSS转换的“复制和粘贴”代码生成器。网址:http://www.cssrotate.com

  16. 你好,
    在本页上:
    http://www.coursesweb.net/javascript/rotate-html-objects-div-span-image-jquery_t
    这是一个关于如何使用jQuery以任意角度旋转Div、Images和其他HTML元素的教程。
    也适用于IE 7+。

  17. 使用css转换时,打印页面时似乎忽略了转换。

    对此有什么想法吗?

    谢谢,
    斯科特

  18. 阿努吉

    你好。。
    这个css不适用于IE8中的每个元素。。
    如果你知道黑客css,请告诉我

  19. 哈普里特·辛格·萨霍塔

    你好,大卫,

    我想知道你如何将社交链接旋转380度:

    http://screencast.com/t/zpKWkwuLy3Y

    我复制了逻辑,但它的旋转稍微不如你的完美。
    如果你能帮我澄清这个模糊的逻辑,我将不胜感激。

    谢谢
    @快乐萨霍塔

  20. 小腿

    IE吸盘和矩阵很糟糕,但有一种方法可以使用此页面上的函数使其动态传递度数或弧度。它没有使用JQuery,而且解释得很好。

    http://kaiscorde.com/javascript-rotate

  21. 如果有人在他们的网站上使用“Font Awesome”–它非常容易覆盖他们的“fa-spin”类创建自己的无限旋转对象。

    .fa-低速旋转{动画:旋转10秒无限线性;}

将代码打包<pre class=“{language}”>标签,链接到GitHub要点、JSFiddle提琴或CodePen笔进行嵌入!