css3 3d transform

a css3 space initialized with perspective, we can now transform elements in all three glorious spatial dimensions, including the third z dimension.

3d transform use the same transform property used for 2d transforms.some 3d transform methods.

  • rotatex( angle )
  • rotatey( angle )
  • rotatez( angle )
  • translatez(tz)
  • scalez( sz )

Css 3d transform browser support

propertybrowser support
transform

 firefox,  chrome,  safari support the transform property.

internet explorer and opera dose't support the 3d transforms(support only 2d transformation).

css3 3dtransform syntax for all major browsers :-

               transform:  method(value)    /*   w3c official syntax.  */ 

             -moz-transform:  method(value)     /*firefox	3.6+    */ 

             -webkit-transform:  method(value)     /* chrome/safari 3.2+    */ 

3d transform rotate() methods

using the rotatex() method, the element rotates around its x-axis at a given degree.

using the rotatey() method, the element rotates around its y-axis at a given degree.

using the rotatez() method, the element rotates around its z-axis at a given degree.

Css3 3d transform rotate methods --

  • rotatex(angle).
  • rotateY(angle).
  • rotatez(angle).

Css3 Transform rotate method example

   <html>
   
     <head>
          
          <style   type="text/css">
          
          
     .rotatex{  width:190px ;
     
          height:120px ;border:5px outset gold;
          
          background-color:#3f3f3f ;
          
          perspective:600px ;
          
          -moz-transform:rotateX(45deg) ;
          
          -webkit-transform:rotateX(45deg) ;
          
      }
          
      .rotatey{  width:190px ;
      
            height:120px ;border:5px outset gold;
            
            background-color:#3f3f3f ;
            
            -moz-transform:rotateY(45deg) ;
            
            -webkit-transform:rotateY(45deg) ;
            
    }
   
   .rotatez{  width:190px ;
   
            height:120px ;border:5px outset gold;
            
            background-color:#3f3f3f ;
            
            -moz-transform:rotateZ(45deg) ;
            
            -webkit-transform:rotateZ(45deg) ;            
     }
          
  </style> </head>
  
  <body>
  
          <div   class=  "container">
          
          <p  class=  "rotatex">transform:rotatex(45deg);</p>
          
          <p  class=  "rotatey">transform:rotatey(45deg);</p>
          
          <p  class=  "rotatez">transform:rotatez(45deg);</p>
          
   </div>

  </body>
  
</html>

transform properties.

propertydescriptioncss
transformapplies a 2d or 3d transformation to an element.css3
transform-originusing it you can change the position on transformed elements.css3
transform-styleindicate how nested elements rendring in 3d area.css3
perspectivespecifies the perspective on how 3d elements are viewedcss3
perspective-originspecifies the bottom position of 3d elements.css3
backface-visibilitywhether or not an element should be visible when not facing the screencss3
functiondescription
martric3d
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
defines a 3d transformation, using a 4x4 matric of 16 values.
translate3d(x,y,z)defines 3d translation.
translatex(x)defines a 3d translation, using only the value for the x-axis.
translatex(y)defines a 3d translation, using only the value for the y-axis.
translatex(z)defines a 3d translation, using only the value for the z-axis.
scale3d(x,y,z)defines 3d scale translation.
scalex(x)defines a 3d scale translation by giving a value for the x-axis.
scaley(y)defines a 3d scale translation by giving a value for the y-axis.
scalez(z)defines a 3d scale translation by giving a value for the z-axis.
rotatex(angle)defines a  3d rotation along the x-axis
rotatey(angle)defines a  3d rotation along the y-axis
rotatez(angle)defines a  3d rotation along the z-axis
perspective(n)defines a perspective view for a 3d transformed element.