CSS Introduction | CSS3 Transforms | 3D Transform

Transform

In CSS3, you can use the transform property to transform the shape, size, position, and other aspects of an HTML element in three dimensions.

CSS3 3D Transform Support Versions

The major web browser versions that support CSS3 3D transforms are as follows. The table also lists the first versions that supported this feature through vendor prefixes.

3D Transform

The methods provided for 3D transforms are as follows.

1. rotate()
2. translate()
3. scale()
4. matrix()
5. perspective()

rotateX() Method

The rotateX() method rotates the element by the given angle around the x-axis. If the given angle is positive, it rotates in the positive direction of the x-axis; if it is negative, it rotates in the negative direction of the x-axis.

<style>
    #rotate_01 {
        -webkit-transform: rotateX(20deg);
        transform: rotateX(20deg);
    }
</style>

rotateY() Method

The rotateY() method rotates the element by the given angle around the y-axis. If the given angle is positive, it rotates in the positive direction of the y-axis; if it is negative, it rotates in the negative direction of the y-axis.

<style>
    #rotate_01 {
        -webkit-transform: rotateY(20deg);
        transform: rotateY(20deg);
    }
</style>

rotateZ() Method

The rotateZ() method rotates the element by the given angle around the z-axis. If the given angle is positive, it rotates in the positive direction of the z-axis; if it is negative, it rotates in the negative direction of the z-axis.

<style>
    #rotate_01 {
        -webkit-transform: rotateZ(20deg);
        transform: rotateZ(20deg);
    }
</style>

translate3d() Method

The translate3d() method moves the element from its current position by the given x-axis, y-axis, and z-axis distances. If the given distance is positive, the element moves in the positive direction of that axis; if it is negative, it moves in the negative direction of that axis.

<style>
    #trans_01 {
        -webkit-transform: translate(100px, 50px);
        -ms-transform: translate(100px, 50px);
        transform: translate(100px, 50px);
    }
    #trans_02 {
        -webkit-transform: translate3d(100px, 50px, -150px);
        transform: translate3d(100px, 50px, -150px);
    }
</style>

Methods related to 3D transforms that appear three-dimensional, such as rotate3d(), translate3d(), and scale3d(), must specify a reference for expressing perspective. In the example above, the perspective() method sets the number of pixels used to express perspective to 500px.

CSS3 3D transform Properties

CSS3 3D transform Methods