CSS3函數(shù)rotate()實(shí)現(xiàn)旋轉(zhuǎn)技術(shù)

1、css3函數(shù)rotate()實(shí)現(xiàn)旋轉(zhuǎn)技術(shù)rotate()函數(shù)能夠旋轉(zhuǎn)元素，它主要是在二維空間內(nèi)舉行操作，通過一個(gè)角度參數(shù)值，來設(shè)定旋轉(zhuǎn)的幅度。假如對元素本身或者元素設(shè)置了perspective值，那么rotate3d()函數(shù)可以實(shí)現(xiàn)一個(gè)3維空間內(nèi)的旋轉(zhuǎn)。關(guān)聯(lián)屬性：transform-origin。取值rotate();為一個(gè)角度值，單位deg，可以為正數(shù)或者負(fù)數(shù)，正數(shù)是順時(shí)針旋轉(zhuǎn)，負(fù)數(shù)是逆時(shí)針旋轉(zhuǎn)。rotatex(angele),相當(dāng)于rotate3d(1,0,0,angle)指定在3維空間內(nèi)的x軸旋轉(zhuǎn)rotatey(angele),相當(dāng)于rotate3d(0,1,0,angle)指定在3維空

2、間內(nèi)的y軸旋轉(zhuǎn)rotatez(angele),相當(dāng)于rotate3d(0,0,1,angle)指定在3維空間內(nèi)的z軸旋轉(zhuǎn)語法transform:rotate();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

3、;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順時(shí)針旋轉(zhuǎn)45度