CSS3 Transform Tutorial – CSS3 Transform Reference

Last Updated on: April 17, 2020   Posted By: Web Design Reference

CSS3 Transform Tutorial: Learn CSS3 Transform Property, CSS3 Transform Property Reference Guide, Know what is CSS Transform Property and How many types of CSS3 Transform Property, CSS3 Transform property examples, How to transform an element on a web page, Learn CSS3 Transform Effects. In this page to learn the Transform Property definition, how to use CSS3 Transform Property on a web page with examples. Follow and Like us on Facebook, Twitter, LinkedIn, Pinterest for the latest posts.

Define CSS3 Transform Property and its Usage?

CSS3 Transform Property: This property is used to allow to Rotate, Skew, Scale, Translate of an element on a web page. Simply we can say this property is used to tansformation of an element in a HTML document.

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: It 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)
 

Web Design Reference Guide Android App for Website Developers

Web Design Reference Guide Android App: Web Design Tutorial App is a tutorial and reference-based app. It provides Web Design Tutorial and Reference to Web Designers or Web Developers to grow their Web Development skills.

Also Related to This Page

Pin0
 

Leave a Reply