3D Transforms

Written by

in

Advanced Features

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 3D Rotate()
CSS 3D Scale()
CSS 3D Transform Related Properties

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;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="container"&gt;&lt;div class="box"&gt;
        3D Box
    &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


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;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="container"&gt;&lt;div class="box"&gt;
        3D Box
    &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


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;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="container"&gt;&lt;div class="box"&gt;
        3D Box
    &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


CSS 3D Transform Related Properties



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. Try It
perspective CSS perspective property determines the distance between the z=0 plane and the user. Try It
perspective-origin CSS perspective-origin property determines the position at which the user is looking at the 3D-positioned element. Try It
rotate3d() CSS rotate3d() function rotates an element in the three-dimensional space. Try It
scale3d() CSS scale3d() function scales an element in the three-dimensional space. Try It
transform CSS transform property transforms an element in the three-dimensional space. Try It
translate css translate property translates an element in three-dimensional space. Try It
rotateZ() CSS rotateZ() function rotates an element around the z-axis. Try It
scaleZ() CSS scaleZ() function scales an element up or down along the z-axis. Try It
translateZ() CSS translateZ() function translates an element up or down along the z-axis. Try It

Comments

Leave a Reply Cancel reply

More posts