CSS3 3D Transforms

In CSS3 using 3D transform we can easily rotate, translate, scale element by x-axis or y-axis.

Table of Contents

List of CSS3 3D Transforms Methods

rotateX()
rotateY()

rotateX() Method

With rotateX() method, we can rotate element by x-axis at given degree.

CSS

div {
    -webkit-transform: rotateX(100deg); /* For Chrome, Safari, Opera */
    transform: rotateX(100deg);
}

rotateY() Method

With rotateY() method, we can rotate element by y-axis at given degree.

CSS

div {
    -webkit-transform: rotateY(145deg); /* For Chrome, Safari, Opera */
    transform: rotateY(145deg);
}

Other 3D Transform Methods

translateX(x) : 3D translation, using this translate element by X-axis.
translateY(y) : 3D translation, using this translate element by Y-axis.
translateZ(z) : 3D translation, using this translate element by Z-axis.
translate3d(x,y,z) : 3D translation, we can pass X, Y & Z Axis parameter together.
scaleX(x) : 3D scale transformation, using this scale element by X-axis.
scaleY(y) : 3D scale transformation, using this scale element by Y-axis.
scaleZ(z) : 3D scale transformation, using this scale element by Z-axis.
scale3d(x,y,z) : 3D scale transformation, we can pass X, Y & Z Axis parameter together.
rotateX(angle) : 3D rotation, using this rotate element by X-axis.
rotateY(angle) : 3D rotation, using this rotate element by Y-axis.
rotateZ(angle) : 3D rotation, using this rotate element by Z-axis.
rotate3d(x,y,z,angle) : 3D rotation, we can pass X, Y & Z Axis parameter together.
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) : Defines a 3D transformation, using a 4×4 matrix of 16 values.

Full HTML & CSS Code

<!DOCTYPE html>
<html>
    <head>
        <style>
            div {
                width: 100px;
                height: 75px;
                background-color: red;
                border: 1px solid black;
            }
            div#rotateX {
                -webkit-transform: rotateX(145deg); /* For Chrome, Safari, Opera */
                transform: rotateX(145deg); /* Standard syntax */
            }
            div#rotateY {
                -webkit-transform: rotateY(145deg); /* For Chrome, Safari, Opera */
                transform: rotateY(145deg); /* Standard syntax */
            }
        </style>
    </head>
    <body>
        <div>Hello. This is a main DIV element.</div>
        <div id="rotateX">Hello. This is a RotateX DIV element.</div>
        <div id="rotateY">Hello. This is a RotateY DIV element.</div>
        <p><b>Note:</b> Internet Explorer 9 (and earlier versions) does not support the rotateX method.</p>
    </body>
</html>

Note: Internet Explorer 9 (and earlier versions) does not support the rotateX method

Mukul K

Meet Mukul, a passionate visionary and a dedicated 3D printing enthusiast. With an insatiable curiosity for technology and a flair for creativity, Mukul has discovered a world where innovation knows no bounds. Armed with a deep understanding of 3D printing and its endless possibilities, he has become a true pioneer in the field, constantly pushing the boundaries of what can be achieved with this remarkable technology.

2 Comments

Mike says:

March 23, 2015 at 10:48 am

Inaam, my timing must be really good.
I just posted 5 hours of video tutorials on CSS3 2D and 3D Transforms, there are also 6 projects that are part of the tutorials. A Card Flip Project, a 3D Cube Project and a 3D Carousel.

I would appreciate if you looked through them and if you have anything to add just let me know.

1. Inaam Hussain says:
  
  March 27, 2015 at 5:01 am
  
  Yeah will surely look in to it.