我們都知道,在css3裡rotate()函數是能夠旋轉元素的,他主要是在二維空間內進行旋轉操作,那麼今天我們就給大家帶來實例,看一下這個rotate()函數怎麼使用。
如果對元素本身或元素設定了perspective值,那麼rotate3d()函數可以實作一個3維空間內的旋轉。
取值
rotate(0c0cb308ee3d2ee3281772bfc9b806c2);0c0cb308ee3d2ee3281772bfc9b806c2為一個角度值,單位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>
#相信看了這些案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
相關閱讀:
以上是CSS3函數rotate()怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!