Advertisement

Advertisement


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.


<!DOCTYPE html>
<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

CSS 3 translate3d() Method

Before Translation:

PUBG

After Translation:

PUBG

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.


<!DOCTYPE html>
<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

CSS 3 rotate3d() Method

Before Rotation:

PUBG

After Rotation:

PUBG

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.


<!DOCTYPE html>
<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

CSS 3 scale3d() Method

Before Scaling:

PUBG

After Scaling:

PUBG

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.









Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.