CSS3 3D Transforms
Elements of 3D Transforms
The CSS3 3D transform allows you to perform basic elements transformation like rotation, scaling, etc. in a
three-dimensional space.
Same as 2D transformation a 3D transformed element also doesn't affects the surrounding elements, It can overlap them. The element just take its own space specified to it before the transformation.
The translate3d() Function
This function moves the element from its current position to a new position along the X, Y and Z-axis. Notice that, in 3d we have one z-axis also, where as in 2D we only had x and y axis. This function is written as translate3d(x-axis, y-axis, z-axis) in px. The function translate3d(20px, 35px, 50px) moves the image 20 pixels along the positive X and 35 pixels along the positive Y-axis, and the 50 pixels along the positive Z-axis.
<html lang="en">
<head>
<title> CSS 3 translate3d() Method </title>
<meta charset="UTF-8">
<style>
.container{
width: 200px;
height: 125px;
perspective: 500px;
border: 4px solid #e5a043;
background: #fff2dd;
margin: 30px;
}
.transformed {
-webkit-transform: translate3d(25px, 25px, 50px); /* Chrome, Safari, Opera */
transform: translate3d(25px, 25px, 50px); /* Standard syntax */
}
</style>
</head>
<body>
<h2>Before Translation:</h2>
<div class="container">
<img src="PUBG.png" alt="PUBG" height="125px" width="200px">
</div>
<h2>After Translation:</h2>
<div class="container">
<img src="PUBG.png" alt="PUBG" height="125px" width="200px" class="transformed">
</div>
</body>
</html>
Output
Before Translation:
After Translation:
The rotate3d() Function
The rotate3d() function rotates the element in 3D space by the specified degree around the direction vector. It's syntax is: rotate(vx, vy, vz, angle). The function rotate3d(1, 0, 0, 30deg) will rotate the image along the X-axis by the angle 30 degrees. Negative values will rotate the element in opposite direction.
<html lang="en">
<head>
<title> CSS 3 rotate3d() Method </title>
<meta charset="UTF-8">
<style>
.container{
margin: 50px;
width: 200px;
height: 125px;
perspective: 300px;
border: 4px solid #a2b058;
background: #f0f5d8;
}
.transformed {
-webkit-transform: rotate3d(0, 1, 0, 60deg); /* Chrome, Safari, Opera */
transform: rotate3d(0, 1, 0, 60deg); /* Standard syntax */
}
</style>
</head>
<body>
<h2>Before Rotation:</h2>
<div class="container">
<img src="image.png" alt="PUBG" style="height:125px; width:200px;">
</div>
<h2>After Rotation:</h2>
<div class="container">
<img src="image.png" alt="PUBG" class="transformed" style="height:125px; width:200px;">
</div>
</body>
</html>
Output
Before Rotation:
After Rotation:
The scale3d() Function
The scale3d() function changes the size of an element. It's syntax is: scale(x-axis, y-axis, z-axis). This function should be used in combination with other transform functions such as rotate3d(x,y,z) and perspective(). The function scale3d(1, 2, 1) scales the elements along the Y-axis and the function rotate3d(1, 0, 0, 60deg) rotates the image along the X-axis by the angle 60 degrees.
<html lang="en">
<head>
<title> CSS 3 scale3d() Method </title>
<meta charset="UTF-8">
<style>
.container{
margin: 50px;
width: 200px;
height: 125px;
perspective: 300px;
border: 4px solid #6486ab;
background: #e9eef3;
}
.transformed {
-webkit-transform: scale3d(1, 1, 2) rotate3d(1, 0, 0, 60deg); /* Chrome, Safari, Opera */
transform: scale3d(1, 1, 2) rotate3d(1, 0, 0, 60deg); /* Standard syntax */
}
</style>
</head>
<body>
<h2>Before Scaling:</h2>
<div class="container">
<img src="PUBG-GAME.png" alt="PUBG" style="height:125px; width:200px;">
</div>
<h2>After Scaling:</h2>
<div class="container">
<img src="PUBG-GAME.png" alt="PUBG" class="transformed" style="height:125px; width:200px;">
</div>
</body>
</html>
Output
Before Scaling:
After Scaling:
CSS Transform Properties
| Property | Description |
|---|---|
| transform | It is used to apply 2D or 3D transformation. |
| transform-origin | It is used to change the position of transformed elements. |
| transform-style | it is used to specify how nested elements are rendered in 3D space. |
| perspective | It specifies how 3D elements are viewed. |