`

css3动画系列之rotate() 方法

阅读更多

浏览器支持情况:

Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。

Chrome 和 Safari 需要前缀 -webkit-。

注释:Internet Explorer 9 需要前缀 -ms-。

 

rotate() 方法

通过 rotate() 方法,元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。

 

实例

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg);
/* Firefox */

}

亲自试一试

值 rotate(30deg) 把元素顺时针旋转 30 度。

分享到:
评论

相关推荐

    CSS3skew倾斜、rotate旋转动画.doc

    CSS3skew倾斜、rotate旋转动画.doc

    炫酷的动画特效—css3旋转立方球体.md

    3. 3D的旋转 transform:rotate(); rotateX() rotateY() rotateZ() rotate3D() rotate3D(x,y,z,a) [ 0不旋转,1旋转 ] - x:是一个0到1之间的数值,主要用来描述元素围绕X轴旋转的矢量值; - y:...

    CSS3实现3D简单动画旋转正方体--海绵宝宝转圈圈

    CSS3实现3D简单动画旋转正方体--海绵宝宝转圈圈 用到: margin: 100px auto; 绝对定位 position absolute; 动画animation animation: move 2s linear infinite; @keyframes move { from{ transform: rotateY(0...

    一个简单的c3动画

    css3动画,简单的rotate动画

    CSS3 3D翻转Tab切换插件

    这是一款基于CSS3的Tab切换插件,关于Tab插件我们之前已经向大家分享过很多了,比如这篇超酷实用的CSS3 Tab菜单集合中就有很多不错的Tab插件。今天分享的这款主要是体现了3D翻转的样式,在点击tab菜单项时,内容区域...

    jQuery Animation实现CSS3动画示例介绍

    jQuery Animation的工作原理是通过将... 像CSS3好多效果因为不是数值的,所以是没有办法直接通过animate()方法实现的。如translate(), rotate(), scale(), skew(), matrix(), rotateX(), rotateY()等方法,这些方法的一

    HTML5/CSS3实现大风车旋转动画

    是一个可以旋转的大风车动画效果,回顾一下利用HTML5实现的旋转动画,我们可以看HTML5/CSS3实现3D旋转陀螺动画,它们的实现都是利用CSS3的transform:rotate属性,这款大风车动画的确比较厉害的。

    3D 旋转的自行车动画 HTML5 css3特效.rar

    HTML5 CSS3技术实现三维旋转的自行车动画,自行车旋转一圈,可以看到轮子的变化很明显,不同视角看到不同的自行车,这个效果打开后,感觉就像...transform: rotate、webkit-linear-gradient等CSS3动画生成要素的用法。

    CSS3 立方体链接特效 带3D旋转动画.rar

    响应式链接特效,鼠标放在上面,立方体就会旋转,同时链接是旋转显示出来,可上下旋转,也可左右旋转,两个都是这样的,我们可以学习用HTML5 css3技术生成立方体特效,另外是一些CSS3中动画属性元素的使用方法,...

    最新CSS3学习视频教程 33讲完整版 后盾网CSS3视频教程

    ├01 css3元素选择器 属性选择器 伪类选择器.mp4 ├02 css3文本选择器 表单选择器 子选择器.mp4 ├03 rgba 字体单位 text-shadow box-shadow.mp4 ├04 盒子尺寸 box-sizing 分栏 background-size linear-gradient ...

    CSS3-3D动画制作旋转立方体

    CSS3-3D动画制作旋转立方体 3D动画是CSS3才有的属性,制作立方体的思路是使用6个正方形div,通过绝对定位+旋转+位移来合成一个立方体。然后再使父亲旋转。 旋转后的面会变成新的X-Y面,旋转后Z轴和位移是对新的面来...

    jquery.rotate:添加了旋转CSS属性和动画的简单插件

    jQuery旋转 添加旋转CSS属性和动画的简单插件 用法 $('。selector')。css('rotate',45); $('。selector')。animate({rotate:'360'},2000); 演示版 执照 根据 版权所有(c)2011-2013

    纯CSS3实现给头像加个光芒四射且旋转的背景动画效果

    复制代码代码如下:”raysDemoHolder”> <a>WebHek</a> ”rays”>...我们这里要用纯CSS来实现,需要使用CSS3的动画技术,这里用到的CSS语法是@keyframes。我们的基本实现原理是用keyframes,从rotate(0deg)旋转到ro

    3D旋转立方体(HTML+CSS3)源码.rar

    3D旋转立方体(HTML+CSS3)源码 主要知识点:css3的transform,rotate,translate,animation等动画, 以perspective,transform-style等属性为辅助

    [CSS3]会动的盒子机器人

    会动的盒子机器人[PC与移动端皆可] 使用css3的perspective,transform[translate,rotate]实现

    纯css实现28种加载loading动态效果

    CSS3实现多种load加载效果,纯CSS3实现多种加载中效果,纯CSS3实现28种加载...3、利用了animation-fill-mode和animation的样式设置,针对动画设置了transform的角度旋转动画rotate设置。 更多资源分享可以看我的主页

    7款非常漂亮的CSS3鼠标hover图片动画特效.zip

    <body>[removed][removed] <li class="current"><a >Puff</a></li> <li><a >Open</a></li> ... 7款基于magic.css来实现,可以制作出非常漂亮的鼠标hover图片效果的CSS3鼠标hover图片动画特效。

    纯css3实现走马灯效果

    纯css3实现了一个正六边形的走马灯效果,记录一下css3动画的学习情况,效果如下: 主要用到的css3技术有:keyframes、perspective、perspective-origin、transform(translate、rotate)、animation、transform-...

    CSS3实现任意图片lowpoly动画效果实例

    这是一个利用CSS3的动画属性实现的结合lowpoly(低多边形风格)的效果,主要利用了CSS3 transform属性的rotate旋转,translate移动,scale缩放,CSS代码部分非常简单,唯一有趣的是 nth-of-type选择器的使用,这里UI...

Global site tag (gtag.js) - Google Analytics