CSS - 3D Transforms

Previous
Quiz
Next

CSS transform are used to animate elements in three-dimensional space by using properties like translate, scale and rotate. In other words, these functions let you rotate, scale, and move elements along the X, Y, and Z axes, adding depth and perspective to your designs.

2D Transform
3D Transform

Table of Contents


 

CSS 3D Translate()

CSS translate3d() function moves an element in 3D space by specifying offsets along the X, Y, and Z axes, where the Z-axis controls depth (distance towards or away from the viewer). The following example shows a box that moves in 3D space when hovered over. The perspective property is used to give a sense of depth for 3d effect.

Example

 <!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body {
            height: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }

        /* Container with Perspective */
        .container {
            perspective: 800px; 
        }

        /* The Box Element */
        .box {
            width: 200px;
            height: 200px;
            background-color: #4CAF50;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.5em;
            border-radius: 10px;
            /* Initial 3D Transformation */
            transform: translate3d(50px, 50px, 100px) 
                        rotateX(15deg) rotateY(25deg);
            transition: transform 0.6s ease;

        }

        /* Hover State with Different 3D Transformation */
        .box:hover {
            transform: translate3d(-50px, -50px, -100px);
            background-color: #2ecc71;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box">
            3D Box
        </div>
    </div>
</body>

</html>

CSS 3D Rotate()

CSS rotate3d() function allows you to rotate an element around a specified axis in 3D space by defining the X, Y, and Z components of the rotation vector and the angle of rotation. Here is an example showing a box that rotates in 3D space when we hover over it, creating a dynamic visual effect.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body {
            height: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }

        /* Container with Perspective */
        .container {
            perspective: 800px; 
        }

        /* The Box Element */
        .box {
            width: 200px;
            height: 200px;
            background-color: #4CAF50;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.5em;
            border-radius: 10px;
            /* Initial 3D Rotation */
            transform: rotate3d(1, 1, 1, 45deg);
            transition: transform 0.6s ease;

        }

        /* Hover State with Different 3D Rotation */
        .box:hover {
            transform: rotate3d(1, 1, 0, -45deg);
            background-color: #2ecc71;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box">
            3D Box
        </div>
    </div>
</body>

</html>

CSS 3D Scale()

CSS scale3d() function scales an element in 3D space by specifying scaling factors along the X, Y, and Z axes, allowing for uniform or non-uniform scaling. The following example shows a box that scales in 3D space when hovered over, creating a visually appealing zoom effect.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body {
            height: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }

        /* Container with Perspective */
        .container {
            perspective: 800px; 
        }

        /* The Box Element */
        .box {
            width: 150px;
            height: 150px;
            background-color: #4CAF50;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.5em;
            border-radius: 10px;
            /* Initial 3D Scaling */
            transform: scale3d(1, 1, 1) rotate3d(1, 1, 0, -45deg);
            transition: transform 0.6s ease;

        }

        /* Hover State with Different 3D Scaling */
        .box:hover {
            transform:  scale3d(1.5, 1.5, 0.5);
            background-color: #2ecc71;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box">
            3D Box
        </div>
    </div>
</body>

</html>

The following table lists all the various properties that are used to transform the elements in the three-dimensional space.

Property Description Example
backface-visibility CSS backface-visibility property sets the visibility of back face of an element to the user.
perspective CSS perspective property determines the distance between the z=0 plane and the user.
perspective-origin CSS perspective-origin property determines the position at which the user is looking at the 3D-positioned element.
rotate3d() CSS rotate3d() function rotates an element in the three-dimensional space.
scale3d() CSS scale3d() function scales an element in the three-dimensional space.
transform CSS transform property transforms an element in the three-dimensional space.
translate css translate property translates an element in three-dimensional space.
rotateZ() CSS rotateZ() function rotates an element around the z-axis.
scaleZ() CSS scaleZ() function scales an element up or down along the z-axis.
translateZ() CSS translateZ() function translates an element up or down along the z-axis.
Print Page
Previous
Next
Advertisements