CSS 3D Transform

Introduction

To understand 3D transformation property of transform you need to first understand the difference between 2D and 3D transform.

2D transform is a CSS effect which transforms the elements according to the size, shape and position. It transforms the element along the x-axis and y-axis.

3D transform creates the illusion of depth and space over the two-dimensional screen. It is possible using the z-axis along with the x-axis and y-axis. 3D transform manipulates the element not only along the width and height but also along the depth.

The main purpose of 3D transform is to enhance the visual effects of a web page and to give rich user experience.

2D - Transform

Property

transform :
transform property is used inside <style> tag. Various functions like translate(), rotate(), scale() and skew() can be used using this property.
Syntax:
transform: method (values) ;
Example:
transform: rotate (20 deg) ;
Here, the function rotate () is used to rotate the element by 20 degrees.
transform-origin :
By default, the origin point of an element is centre. To change the origin point of the transformation there another property called as transform-origin.

Syntax:
transform-origin: values ;
Example:
transform-origin: left top;
Changes the origin of transformation to the left top of the element.
transform-origin: 30% 50%;
Changes the origin of x-axis by 30% and y-axis by 50%.

CSS Transform Methods - 3D Values

Along with the methods of 2D transform there are few methods used for 3D transform:

matrix3D(n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n)
This method transforms the element and it uses 16 values of matrix.
perspective(n)
This method gives the perspective view of an element allowing user to get a 3D view.
There are two ways to add perspective to the element.

transform: perspective(pixel value);
perspective() is used with the methods like rotate(), scaleX(), and so on to enhance the visual effects of the element.
For example:

#element{
transform: perspective(450px) rotateX(45deg);
}

perspective: pixel value;
For example:

#element{
perspective: 450px; 
}
#base{
transform:  rotate(60deg);
}

Example:

<!DOCTYPE html>
<html>
<head>
<title>CSS Transform</title>
<style type="text/css">
body{
font-family: cursive;
}
.base{
width: 250px;
height: 150px;
background: skyblue;
font-size:20px;
margin: 50px 0 0 40px;
}
.side{
width: 250px;
height: 150px;
background: skyblue;
font-size:20px;
margin: 80px 0 0 50px;
}
#box{
width: 250px;
height: 150px;
background: tomato;
}
#square{
width: 250px;
height: 150px;
background: blue;
transform: perspective(200px) rotateX(60deg);
}
</style>
</head>
<body>
<h1>CSS Transform 3D</h1>
<div class="base">
<div id="box"> 3D transform normal</div>
</div>
<div class="side">
<div id="square"> 3D transform perspective</div>
</div>
</body>
</html>

Output:

Here, element 3D transform normal shows the element without using perspective(). And the 3D transform perspective element uses perspective(200px) thus adding perfect 3D effects to the element.

rotate3d(x,y,z,angle)
This method allows 3D rotation of an element along the x-axis, y-axis and z-axis together.
Syntax:
transform: rotate3d(x, y, z, angle);
Example:

<!DOCTYPE html>
<html>
<head>
<title>CSS Transform</title>
<style type="text/css">
body{
font-family: cursive;
}
.base{
width: 250px;
height: 150px;
background: skyblue;
font-size:20px;
margin: 50px 0 0 40px;
}
.side{
width: 250px;
height: 150px;
background: skyblue;
font-size:20px;
margin: 80px 0 0 50px;
}
#box{
width: 250px;
height: 150px;
background: tomato;
transform: translateX(30px) rotate3d(1,1,1,45deg);
}
#square{
width: 250px;
height: 150px;
background: blue;
transform: perspective(200px)      rotate3d(1,1,1,45deg);
}
</style>
</head>
<body>
<h1>CSS Transform 3D</h1>
<div class="base">
<div id="box"> 3D transform without perspective</div>
</div>
<div class="side">
<div id="square"> 3D transform with perspective</div>
</div>
</body>
</html>

Output:

Above output depicts the rotate 3D() with perspective() and without perspective().

rotateX(angle):
This method allows the 3D rotation of an element along the x-axis.

Syntax:

transform: rotateX(angle);

Example:

#box{
width: 250px;
height: 150px;
background: tomato;
-webkit-transform: rotateX(45deg);
}
#square{
width: 250px;
height: 150px;
background: blue;
-webkit-transform: perspective(300px) rotateX(45deg);
}

Output:

Here, the rotateX() function rotates the element along the x-axis. The output depicts the how the perspective() methods makes a difference in the visual effect.

rotateY(angle):
Like rotateX(), rotateY() transforms the element along the y-axis.

Syntax:

transform: rotateX(angle);

Example:

#square{
width: 250px;
height: 150px;
background: blue;
transform-origin: left center;
transform: perspective(300px) rotateY(45deg);
}

Output:

Here, we have used transform-origin : left center; to change the origin point of the element.

rotateZ(angle):
rotateZ() transforms the element along the z-axis which defines the depth.

Syntax:

transform: rotateZ(angle);
Example:
#box{
width: 250px;
height: 150px;
background: tomato;
transform: rotateZ(40deg);
}
#square{
width: 250px;
height: 150px;
background: blue;
transform: perspective(300px) rotateZ(45deg);
}

Output:

Above example rotates the element along the z-axis using rotateZ(45deg).

translate3d(x, y, z):
This method moves the element along x-axis, y-axis and z-axis.

Syntax:

transform: translate3d(x, y, z);

Example:

<!DOCTYPE html>
<html>
<head>
<title>CSS Transform</title>
<style type="text/css">
body{
font-family: cursive;
}
.base{
width: 250px;
height: 150px;
background: skyblue;
font-size:20px;
margin: 50px 0 0 40px;
}
.side{
width: 250px;
height: 150px;
background: skyblue;
font-size:20px;
margin: 80px 0 0 50px;
}
#box{
width: 250px;
height: 150px;
background: tomato;
transform: translate3d(10px, 20px, 45px);
}
#square{
width: 250px;
height: 150px;
background: lightpink;
transform: perspective(500px) translate3d(10px, 20px, 45px);
}
</style>
</head>
<body>
<h1>CSS Transform 3D</h1>
<div class="base">
<div id="box"> 3D transform without perspective</div>
</div>
<div class="side">
<div id="square"> 3D transform with perspective</div>
</div>
</body>
</html>

Output:

Above example shows how the element is translated using translate3D(x,y,z) method.

translateX(angle):
This method moves the element along the x-axis.

Syntax:

transform: translateX(angle);

Example:

#square{
width: 250px;
height: 150px;
background: lightpink;
transform: perspective(200px) rotateX(20deg)translateX(100px);
}

Output:

translateY(angle):
This method moves the element along the y-axis.

Syntax:

transform: translateY(angle);

Example:

#square{
width: 250px;
height: 150px;
background: lightpink;
transform: perspective(200px) rotateX(20deg) translateY(100px);
}

Output:

translateZ(angle):
This method moves the element along the x-axis.

Syntax:

transform: translateZ(angle);

Example:

#square{
width: 250px;
height: 150px;
background: lightpink;
transform: perspective(200px) rotateX(20deg)translateZ(100px);
}

Output:

scale3d(x,y,z):
This methos increases the size of an element along the x-axis, y-axis and the z-axis together.

Syntax:

transform: scale3d(x, y, z);

Example:

<!DOCTYPE html>
<html>
<head>
<title>CSS Transform</title>
<style type="text/css">
body{
font-family: cursive;
}
.base{
width: 250px;
height: 150px;
background: skyblue;
font-size:20px;
margin: 50px 0 0 40px;
}
.side{
width: 250px;
height: 150px;
background: skyblue;
font-size:20px;
margin: 80px 0 0 50px;
}
#box{
width: 250px;
height: 150px;
background: tomato;
}
#square{
width: 250px;
height: 150px;
background: tomato;
transform: perspective(200px) translateZ(100px) scale3d(0.3,0.3,0.5);
}
</style>
</head>
<body>
<h1>CSS Transform 3D</h1>
<div class="base">
<div id="box">Before 3d scaling</div>
</div>
<div class="side">
<div id="square">After 3d scaling</div>
</div>
</body>
</html>

Output:

Above example depicts the scaling of a box element along x-axis, y-axis, and z-axis.

scaleX(angle):
Increases the size of an element along the x-axis.

Syntax:

transform: scaleX(angle);
Example:
#square{
width: 250px;
height: 150px;
background: tomato;
transform-origin: left center;
transform: scaleX(2) translateX(50px);
}

Output:

Here the scaleX(2) increments the size of the box 2 times its width i.e. along the x-axis.

scaleY(angle):
Increases the size of an element along the its height i.e. the y-axis.

Syntax:

transform: scaleY(angle);

Example:

#square{
width: 250px;
height: 150px;
background: tomato;
transform-origin: left center;
transform: scaleY(1.5) translateX(50px);
}

Output:

Here, the element is scaled along the y-axis i.e. 1.5 times its height.

scaleZ(angle):
Increases the size of an element along the its height i.e. the y-axis.

Syntax:

transform: scaleZ(angle);

Example:

#square{
width: 250px;
height: 150px;
background: tomato;
transform-origin: left center;
transform: perspective(200px) scaleZ(2) rotateX(20deg);
}

Output:

Here the scaleZ() method scales the box element along z-axis, with twice its depth.

none:
It is the default value of the transform. When you don’t want to apply any transformation the value is none.

Syntax:

transform: none;

Thus, in this article we have learnt the 3D transform techniques of CSS and its various methods to modify the element along x-axis, y-axis, z-axis.

CSS Introduction

CSS Attributes

Misc

CSS Introduction

CSS Attributes

Misc

CSS 3D Transform

Introduction

2D - Transform

Property

CSS Transform Methods - 3D Values