CSS3函数rotate()怎么使用
程序员文章站
2022-05-01 15:25:30
...
我们都知道,在css3里rotate()函数是能够旋转元素的,他主要是在二维空间内进行旋转操作,那么今天我们就给大家带来实例,看一下这个rotate()函数怎么使用。
如果对元素本身或者元素设置了perspective值,那么rotate3d()函数可以实现一个3维空间内的旋转。
取值
rotate(<angle>);<angle>为一个角度值,单位deg,可以为正数或者负数,正数是顺时针旋转,负数是逆时针旋转。
rotateX(angele),相当于rotate3d(1,0,0,angle)指定在3维空间内的X轴旋转
rotateY(angele),相当于rotate3d(0,1,0,angle)指定在3维空间内的Y轴旋转
rotateZ(angele),相当于rotate3d(0,0,1,angle)指定在3维空间内的Z轴旋转
语法
t
ransform:rotate(<angle>); CSS .rotate_clockwise{ -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); position:absolute; left:10px; top:80px; } .rotate_anticlockwise{ -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); position:absolute; left:200px; top:80px; } .rotateX{ -webkit-transform:perspective(800px) rotateX(60deg); -moz-transform:perspective(800px) rotateX(60deg); position:absolute; left:400px; top:80px; } .rotateY{ -webkit-transform:perspective(800px) rotateY(60deg); -moz-transform:perspective(800px) rotateY(60deg); position:absolute; left:600px; top:80px; } .rotateZ{ -webkit-transform:perspective(800px) rotateZ(60deg); -moz-transform:perspective(800px) rotateZ(60deg); position:absolute; left:800px; top:80px; } HTML <divclass="demo_box rotate_clockwise">顺时针旋转45度</div> <divclass="demo_box rotate_anticlockwise">逆时针旋转45度</div> <divclass="demo_box rotateX">3维空间内X轴旋转60度</div> <divclass="demo_box rotateY">3维空间内Y轴旋转60度</div> <divclass="demo_box rotateZ">3维空间内Z轴旋转60度</div>
相信看了这些案例你已经掌握了方法,更多精彩请关注其它相关文章!
相关阅读:
以上就是CSS3函数rotate()怎么使用的详细内容,更多请关注其它相关文章!
上一篇: apache中访问不了伪静态页面的解决方法_MySQL
下一篇: sql的join和where区别