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
- translate()
- rotate()
- skew()
- matrix()
- scale()
- 3D Transform
- rotateX()
- 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
transform: rotate(40deg);
-webkit-transform: rotate(40deg);
}
CSS3 2D transform: translate() method
transform: translate(60px,100px);
-webkit-transform: translate(60px,100px);
}
CSS3 2D transform: skew() method
transform: skew(40deg,20deg);
-webkit-transform: skew(40deg,20deg);
}
CSS3 2D transform: matrix() method
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
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
- rotateX()
- rotateY()
3D transform : rotateX() method
transform: rotateX(110deg);
-webkit-transform: rotateX(110deg);
}
3D transform : rotateY() method
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.