CSS 3D TRANSFORMS
Using CSS 3D transform you can perform 3D operations on HTML elements like scale, skew, rotate, translate etc.
The 3D translated elements don't affect surrounding elements and may overlap them. The translated element takes the same space as its default.
To apply 3D transformation CSS use transform property and values are given as required like scaling, rotation etc.
We are going to learn following 3D transform properties:
1.) CSS translate3d
Using CSS translate3d you can translate or move HTML elements along X, Y and Z-axis.
The CSS translate3d takes three arguments, each for one axis X, Y and Z respectively. The coordinate values could be negative as well as positive.
Example- transform: translate3d( x, y, z)
2.) CSS rotate3d
Using CSS rotate3d you can rotate HTML elements along X, Y and Z-axis.
The CSS rotate3d takes four arguments, each for one axis X, Y, Z and degree value respectively. The X, Y and Z value is multiplied with specified degree internally and this gives how much angle should be rotated for each axis.
Example- transform: rotate3d( x, y, z, deg)
3.) CSS scale3d
Using CSS scale3d you can scale HTML elements along X, Y and Z-axis.
The CSS scale3d changes the size of the element. It takes 3 arguments, each for X, Y and Z respectively.
For CSS rotate3d to work you need to use either rotate3d property or perspective property.
Example- transform: scale3d( x, y, z)