tutorialstonight logo
A Platform To Learn To Code

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
  2. CSS rotate3d
  3. CSS scale3d


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)

Example

Run the code

Output:

This div element is translated in 3D 50px in x-axis, 10px in Y-axis and 20px in Z-axis.


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)

Example

Run the code

Output:

This div element is rotated in X and Y-axis by 60deg and Z-axis by 1.2×60deg=72deg.


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)

Example

Run the code

Output:

This div element is scaled in X by 1, in Y-axis by 1.5× and in Z-axis by 2×.





BOX

BOX