CSS3 function rotate () How to use

We all know that in the CSS3 rotate () function is able to rotate the elements, he is mainly in the two-dimensional space in the rotation operation, then today we will give you an example, see how this rotate () function use.

If the perspective value is set on the element itself or the element, then the Rotate3d () function can achieve a rotation within a 3-dimensional space.

Association properties: Transform-origin.

Take value

Rotate (<angle>);<angle> is an angle value, unit deg, can be positive or negative, positive number is clockwise rotation, negative number is counterclockwise rotation.

Rotatex (Angele), equivalent to Rotate3d (1,0,0,angle) specifies an x-axis rotation within a 3-D space

Rotatey (Angele), equivalent to Rotate3d (0,1,0,angle) specifies a y-axis rotation within a 3-dimensional space

Rotatez (Angele), equivalent to Rotate3d (0,0,1,angle) specifies a z-axis rotation within a 3-D space

Grammar

T

Ransform:rotate (<angle>); Css.rotate_clockwise{-webkit-transform:rotate (45deg);-moz-transform:rotate (45deg);p osition:absolute;left:10px; top:80px;}. Rotate_anticlockwise{-webkit-transform:rotate ( -45deg);-moz-transform:rotate ( -45deg);p Osition: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" > Clockwise rotation 45 degrees </div><divclass= "Demo_box rotate_anticlockwise" > Counterclockwise rotation 45 degrees </div><divclass= "Demo_box Rotatex" >3 dimensional space X axis rotation 60 degrees </div><divclass= "Demo_box Rotatey "y-axis rotation in >3-dimensional space 60 degrees </div><divclass=" Demo_box ROtatez "z-axis rotation in >3-dimensional space 60 degrees </div> 

Believe that you have seen these cases you have mastered the method, more wonderful please pay attention to the PHP Chinese network other related articles!

Related reading:

The Border-image attribute in CSS3 is described in detail

CSS3 making circular style breadcrumbs code implementation steps

CSS3 font to make flame effect steps