Dremendo Tag Line
CSS Tutorial

CSS Transform

All About Effects

In this lesson, we will learn about the CSS transform property and how to apply it on HTML elements.

CSS transform Property

The CSS transform property is used to apply various transformation effects to HTML elements, such as moving, rotating, scaling, and skewing them. These transformations can be applied to both 2D and 3D elements.

The basic syntax for using the transform property is as follows:

Syntax 
selector {
    transform: transform-function;
}

The list of commonly used transform property values are:

  • translate()
  • translate3d()
  • rotate()
  • rotate3d()
  • scale()
  • scale3d()
  • skew()
video-poster

translate()

The translate() function moves an element along the X and Y axis. It takes two values: translate(x, y).

The value of X move the element right, while negative value move it left. The value of Y move the element down, while negative value move it up.

The value of x and y can be expressed in various units such as pixels (px), percentages (%), em, rem, vw, vh, or any other valid CSS length unit.

You can also use translateX(x) and translateY(y) to individually set the value of X and Y axis.

Example

translate3d()

The translate3d() function is used to move an element in three-dimensional (3D) space. It takes three values: translate3d(x, y, z).

The value of X and Y specifies how much the element moves horizontally and vertically respectively. The value of Z specifies the depth of the element, that means how much close or far the element will display from the viewer.

The value of x, y and z can be expressed in various units such as pixels (px), percentages (%), em, rem, vw, vh, or any other valid CSS length unit.

You can also use translateX(x), translateY(y) and translateZ(z) to individually set the value of X, Y and Z axis.

Note: The translateZ() function will only work when you use the CSS perspective property or perspective() function. The perspective property is set on the parent element to make it act like a 3D space for its child elements whereas the perspective() function is directly applied to an element to make it act like as if it is in a 3D space.

Example 
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS transform Example</title>

    <!-- Internal CSS -->
    <style>
        .container {
            width: 500px;
            height: 300px;
            perspective: 100px;
            background-image: url("3d-depth.jpg");
            background-size: cover;
        }

        .box1 {
            width: 150px;
            height: 150px;
            background-color: #60CA00;
            font-size: 150px;
            text-align: center;
            line-height: 150px;
            transform: translate3d(50px, 20px, -300px);
        }

        .box2 {
            width: 150px;
            height: 150px;
            background-color: #60CA00;
            font-size: 150px;
            text-align: center;
            line-height: 150px;
            transform: translateX(150px) translateY(50px) translateZ(-200px);
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box1">A</div>
        <div class="box2">B</div>
    </div>
</body>

</html>

Using the CSS perspective property or perspective() function, we define a perspective point in 3D space which determines how close or far away an element appears in 3D space relative to the viewer. This perspective point is typically placed along the Z-axis, which is perpendicular to the screen.

Elements closer to the viewer (in terms of Z-axis) will appear larger, while those farther away will appear smaller.

The value of the perspective point can be a length value (for example: %, px, em, rem, etc.), which represents the distance from the viewer to the perspective point. A larger value makes the perspective effect less, and a smaller value makes it more pronounced.

Click here to download the background image "3d-depth.jpg" for practice purposes.

rotate()

The rotate() function rotates an element by a specified angle in degrees. It takes one value: rotate(Ndeg). The degree can be positive or negative.

Example 
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS transform Example</title>

    <!-- Internal CSS -->
    <style>
        .box {
            width: 150px;
            height: 150px;
            background-color: #60CA00;
            font-size: 150px;
            text-align: center;
            line-height: 150px;
            position: relative;
            left: 50px;
            top: 30px;
            transform: rotate(20deg);
        }
    </style>
</head>

<body>
    <div class="box">A</div>
</body>

</html>

rotate3d()

The rotate3d() function in CSS is used to apply a 3D rotation transformation to an element. Unlike rotate(), which rotates an element in a 2D plane, rotate3d() allows you to rotate an element in 3D space. It takes four parameters: rotate3d(x, y, z, angle). This function is especially useful when creating complex 3D transformations and animations.

The parameters X, Y and Z represents the direction of the axis around which the rotation will occur. The value of X, Y and Z can be 1 or 0 where 1 means rotate along the axis and 0 means no rotation.

The last parameter, angle, specifies the amount by which the element should be rotated. It is measured in degrees and determines the degree of rotation around the axis defined by the X, Y, and Z parameters.

You can also use the function rotateX(angle), rotateY(angle) and rotateZ(angle) to rotate an element in a 3D space along the X, Y and Z axis. The angle can be specified in degree or turn where 1 turn is equal to 360 degrees.

Example 
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS transform Example</title>

    <!-- Internal CSS -->
    <style>
        .box {
            width: 150px;
            height: 150px;
            background-color: #60CA00;
            font-size: 150px;
            text-align: center;
            line-height: 150px;
            position: relative;
            left: 50px;
            top: 30px;
            transform: perspective(200px) rotate3d(1, 0, 0, 60deg);	/* 3D rotate 60 degree vertical */
        }
    </style>
</head>

<body>
    <div class="box">R</div>
</body>

</html>

When using the perspective() function on 2D elements, it makes them behave like as if they are in a 3D space.

scale()

The scale() function resize an element by a specified scale factor in a 2D space. It takes one value like scale(1.5) for both horizontal and vertical scaling or two different values for horizontal and vertical scaling like scale(1.5, 0.5).

Example 
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS transform Example</title>

    <!-- Internal CSS -->
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: #60CA00;
            font-size: 100px;
            text-align: center;
            line-height: 100px;
            position: relative;
            left: 50px;
            top: 30px;

            /* resize the div 1.5 times bigger than the
            original size both horizontally and vertically */
            transform: scale(1.5);
        }
    </style>
</head>

<body>
    <div class="box">D</div>
</body>

</html>

scale3d()

The scale3d() function resize an element by a specified scale factor in a 3D space. It takes three values: scale(x, y, x) to resize an element along the X, Y and Z axis.

You can also use scaleX(x), scaleY(y) and scaleZ(z) to individually define the scale transformation along X, Y and Z axis.

Example 
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS transform Example</title>

    <!-- Internal CSS -->
    <style>
        div {
            position: absolute;
            width: 100px;
            height: 100px;
            line-height: 100px;
            font-size: 100px;
            text-align: center;
        }

        .box {
            transform-style: preserve-3d;
            transform: rotateX(345deg) rotateY(330deg) scale3d(1.5, 1.5, 2);
            position: relative;
            top: 50px;
            left: 100px;
        }

        .front {
            background-color: yellow;
            transform: translate3d(0, 0, 50px);
        }

        .top {
            background-color: red;
            transform: rotateX(90deg) translate3d(0, 0, 50px);
        }

        .left {
            background-color: green;
            transform: rotateY(90deg) translate3d(0, 0, 50px);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="front">A</div>
        <div class="top">B</div>
        <div class="left">C</div>
    </div>
</body>

</html>

The CSS transform-style property is often applied to a parent element that contains 3D-transformed child elements. The value preserve-3d ensures that the child elements maintain their 3D positioning and perspective, allowing them to be rendered in true 3D space.

skew()

The skew() function skews (stretch) an element along the X and Y axis. It takes two values: skew(x-angle, y-angle). You can also use skewX(angle) and skewY(angle) to individually skew an element along X or Y axis.

Example 
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS transform Example</title>

    <!-- Internal CSS -->
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: #60CA00;
            font-size: 100px;
            text-align: center;
            line-height: 100px;
            position: relative;
            left: 50px;
            top: 30px;
            transform: skew(10deg, 20deg);
        }
    </style>
</head>

<body>
    <div class="box">K</div>
</body>

</html>

Previous Next
Dremendo

For over a decade, Dremendo has been recognized for providing quality education. We proudly introduce our newly open online learning platform, which offers free access to popular computer courses.

Our Courses
News Updates
© 2024 Dremendo. All Rights Reserved.