浏览器支持情况:
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
3. 3D的旋转 transform:rotate(); rotateX() rotateY() rotateZ() rotate3D() rotate3D(x,y,z,a) [ 0不旋转,1旋转 ] - x:是一个0到1之间的数值,主要用来描述元素围绕X轴旋转的矢量值; - y:...
CSS3实现3D简单动画旋转正方体--海绵宝宝转圈圈 用到: margin: 100px auto; 绝对定位 position absolute; 动画animation animation: move 2s linear infinite; @keyframes move { from{ transform: rotateY(0...
css3动画,简单的rotate动画
这是一款基于CSS3的Tab切换插件,关于Tab插件我们之前已经向大家分享过很多了,比如这篇超酷实用的CSS3 Tab菜单集合中就有很多不错的Tab插件。今天分享的这款主要是体现了3D翻转的样式,在点击tab菜单项时,内容区域...
jQuery Animation的工作原理是通过将... 像CSS3好多效果因为不是数值的,所以是没有办法直接通过animate()方法实现的。如translate(), rotate(), scale(), skew(), matrix(), rotateX(), rotateY()等方法,这些方法的一
是一个可以旋转的大风车动画效果,回顾一下利用HTML5实现的旋转动画,我们可以看HTML5/CSS3实现3D旋转陀螺动画,它们的实现都是利用CSS3的transform:rotate属性,这款大风车动画的确比较厉害的。
HTML5 CSS3技术实现三维旋转的自行车动画,自行车旋转一圈,可以看到轮子的变化很明显,不同视角看到不同的自行车,这个效果打开后,感觉就像...transform: rotate、webkit-linear-gradient等CSS3动画生成要素的用法。
响应式链接特效,鼠标放在上面,立方体就会旋转,同时链接是旋转显示出来,可上下旋转,也可左右旋转,两个都是这样的,我们可以学习用HTML5 css3技术生成立方体特效,另外是一些CSS3中动画属性元素的使用方法,...
├01 css3元素选择器 属性选择器 伪类选择器.mp4 ├02 css3文本选择器 表单选择器 子选择器.mp4 ├03 rgba 字体单位 text-shadow box-shadow.mp4 ├04 盒子尺寸 box-sizing 分栏 background-size linear-gradient ...
CSS3-3D动画制作旋转立方体 3D动画是CSS3才有的属性,制作立方体的思路是使用6个正方形div,通过绝对定位+旋转+位移来合成一个立方体。然后再使父亲旋转。 旋转后的面会变成新的X-Y面,旋转后Z轴和位移是对新的面来...
jQuery旋转 添加旋转CSS属性和动画的简单插件 用法 $('。selector')。css('rotate',45); $('。selector')。animate({rotate:'360'},2000); 演示版 执照 根据 版权所有(c)2011-2013
复制代码代码如下:”raysDemoHolder”> <a>WebHek</a> ”rays”>...我们这里要用纯CSS来实现,需要使用CSS3的动画技术,这里用到的CSS语法是@keyframes。我们的基本实现原理是用keyframes,从rotate(0deg)旋转到ro
3D旋转立方体(HTML+CSS3)源码 主要知识点:css3的transform,rotate,translate,animation等动画, 以perspective,transform-style等属性为辅助
会动的盒子机器人[PC与移动端皆可] 使用css3的perspective,transform[translate,rotate]实现
CSS3实现多种load加载效果,纯CSS3实现多种加载中效果,纯CSS3实现28种加载...3、利用了animation-fill-mode和animation的样式设置,针对动画设置了transform的角度旋转动画rotate设置。 更多资源分享可以看我的主页
<body>[removed][removed] <li class="current"><a >Puff</a></li> <li><a >Open</a></li> ... 7款基于magic.css来实现,可以制作出非常漂亮的鼠标hover图片效果的CSS3鼠标hover图片动画特效。
纯css3实现了一个正六边形的走马灯效果,记录一下css3动画的学习情况,效果如下: 主要用到的css3技术有:keyframes、perspective、perspective-origin、transform(translate、rotate)、animation、transform-...
这是一个利用CSS3的动画属性实现的结合lowpoly(低多边形风格)的效果,主要利用了CSS3 transform属性的rotate旋转,translate移动,scale缩放,CSS代码部分非常简单,唯一有趣的是 nth-of-type选择器的使用,这里UI...