CSS3 3D Transforms

March 23, 2015
by Inaam Hussain

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

List of CSS3 3D Transforms Methods

  • rotateX()
  • rotateY()

 

rotateX() Method

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

3D Rotate X-axis

3D Rotate X-axis

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.

3D Rotate Y-axis

3D Rotate Y-axis

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

HTML & CSS
<!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>

 

About

Engineer. Blogger. I like to be updated on new upcoming emerging technologies.

Get notified on our new articles

Subscribe to get the latest on Node.js, Angular, Blockchain and more. We never spam!
First Name:
Email:

2 comments

  1. |

    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.

Leave a Comment