CSS3 Transform Tutorial And Reference

Published on: September 9, 2014   Last Updated on : December 7, 2014   Posted By : WebDesignReference

Css3 Supports two type of Transform property :

  • 2D Transform
    1. translate()
    2. rotate()
    3. skew()
    4. matrix()
    5. scale()
  • 3D Transform
    1. rotateX()
    2. rotateY()

Css3 2D Transform

Css3 2D Transform :This property allow transformation of an element in different size, shape, and position.

Properties of CSS3 2D Transform are :

  • Transform Property
  • Transform-origin Property

2D transform : allows transformation of an element in different size, shape, position through different 2D transform methods.

Css3 2D transform methods are listed below.

  • rotate()
  • translate()
  • skew()
  • matrix()
  • scale()

2D transform : rotate() method

Example : use of Css3 2D transform : Rotate() Method.

.2d-transform-demo {
transform: rotate(40deg);
-webkit-transform: rotate(40deg);
}

 

Css3 2D transform : translate() method

Example : use of Css3 2D transform : Translate() Method.

.2d-transform-demo {
transform: translate(60px,100px);
-webkit-transform: translate(60px,100px);
}

 

Css3 2D transform : skew() method

Example : use of Css3 2D transform : Skew() Method.

.2d-transform-demo {
transform: skew(40deg,20deg);
-webkit-transform: skew(40deg,20deg);
}

 

Css3 2D transform : matrix() method

Example : use of Css3 2D transform : Matrix() Method.

.2d-transform-demo {
transform: matrix(0.800,0.5,-0.5,0.806,0,0);
-webkit-transform: matrix(0.800,0.5,-0.5,0.806,0,0);
}

 

Css3 2D transform : scale() method

Example : use of Css3 2D transform : Scale() Method.

.2d-transform-demo {
transform: scale(3,4);
-webkit-transform: scale(3,4);
}

 

Css3 3D Transform

Css3 3D Transform :This property allows 3D transformation of an element through different methods.

Properties of CSS3 3D Transform are :

  • Transform Property
  • Transform-origin (three-value) Property
  • Transform Style Property
  • Transform Perspective Property
  • Transform Perspective-origin Property
  • Transform Backface-visibility Property

Css3 3D transform methods are listed below.

  • rotateX()
  • rotateY()

3D transform : rotateX() method

Example : use of Css3 3D transform : RotateX() Method.

.3d-transform-demo {
transform: rotateX(110deg);
-webkit-transform: rotateX(110deg);
}

 

3D transform : rotateY() method

Example : use of Css3 3D transform : RotateY() Method.

.3d-transform-demo {
transform: rotateY(110deg);
-webkit-transform: rotateY(110deg);
}

Css3 3D transform complete method list below :

  • translateX(x-axis)
  • translateY(y-axis)
  • translateZ(z-axis)
  • translate3d(x-axis,y-axis,z-axis)
  • rotate3d(x-axis,y-axis,z-axis,angle)
  • scaleX(x-axis)
  • scaleY(y-axis)
  • scaleZ(z-axis)
  • rotateX(angle)
  • rotateY(angle)
  • rotateZ(angle)
  • matrix3d(sixteen n)
 

Leave a Reply