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>

 

Free PDF

Subscribe and get AngularJS Tips PDF. 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