CSS

CSS Intro

CSS Intro Quiz

CSS Intro Exercise

CSS Basic

CSS Basic Quiz

CSS Basic Exercise

CSS Advance

CSS Advance Quiz

CSS Advance Exercise

CSS3

CSS3 Quiz

CSS3 Exercise

CSS Properties

CSS Functions

CSS Selectors

Transform rotate Property in CSS

Transform Rotate

 

 

Transform rotation allows us to rotate the element either in a clockwise direction or an anti-clockwise direction. Using a positive value will rotate an element clockwise, and using a negative value will rotate the element counter-clockwise.

 

Syntax:-

 

Its syntax is:-

< style >

element{

transform: rotate3d(x,y,z,angle)| rotateX(angle)| rotateY(angle)| rotateZ(angle);

}

< /style >

 

Further Explanation:-

 

Value Description
none Defines that there should be no transformation
matrix(n,n,n,n,n,n) Defines a 2D transformation, using a matrix of six values
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Defines a 3D transformation, using a 4x4 matrix of 16 values
translate(x,y) Defines a 2D translation
translate3d(x,y,z) Defines a 3D translation
translateX(x) Defines a translation, using only the value for the X-axis
translateY(y) Defines a translation, using only the value for the Y-axis
translateZ(z) Defines a 3D translation, using only the value for the Z-axis
scale(x,y) Defines a 2D scale transformation
scale3d(x,y,z) Defines a 3D scale transformation
scaleX(x) Defines a scale transformation by giving a value for the X-axis
scaleY(y) Defines a scale transformation by giving a value for the Y-axis
scaleZ(z) Defines a 3D scale transformation by giving a value for the Z-axis
rotate(angle) Defines a 2D rotation, the angle is specified in the parameter
rotate3d(x,y,z,angle) Defines a 3D rotation
rotateX(angle) Defines a 3D rotation along the X-axis
rotateY(angle) Defines a 3D rotation along the Y-axis
rotateZ(angle) Defines a 3D rotation along the Z-axis
skew(x-angle,y-angle) Defines a 2D skew transformation along the X- and the Y-axis
skewX(angle) Defines a 2D skew transformation along the X-axis
skewY(angle) Defines a 2D skew transformation along the Y-axis
perspective(n) Defines a perspective view for a 3D transformed element
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Code Explanation

All Tutorials related to CSS3

All Sections related to CSS