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.