2D transformations can change the x and y axis of an element.

3D transformations can change the x, y and z axis of an element.

Syntax: –

Selector { transform-origin: x-axis y-axis z-axis; }

Ex: –

div { transform-origin: 10%   20%    30%  ; }

x-axis–

This is used to define where the view is placed at the x-axis.

• left
• center
• right
• length (px, cm, em, %)

y-axis-

This is used to define where the view is placed at the y-axis.

• top
• center
• bottom
• length (px, cm, em, %)

z-axis-

This is used to define where the view is placed at the z-axis.

• length (px, cm, em, %)

transform-style-

This property is used to specify how nested elements are rendered in 3D space. This property must be used together with the transform property. We can set this property to flat (default) and preserve-3d.

Ex: –

div { transform-style: preserve-3d ; }

Note – child elements will preserve its 3D position

The post How to use transform-origin property in CSS? appeared first on scmGalaxy.