skew()
skew() can be use to turn an element to a given angle. With skew() property, element is turned to an angle according to the parameters given for horizontal line (X-axis) and vertical line (Y-axis).
div#div2 {
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Chrome, Safari, Opera */
transform: skew(30deg,20deg); /* Standard syntax */
}
This is the output of above mentioned code snippet:
matrix()
The matrix() method combines all of the 2D transforms.
It takes six parameters containing mathematical mathematical functions. Which allows you to rotate, scale, move(translate), and skew elements respectively.
The below example demonstrates how we can rotate any element using matrix() method:
div#div2 {
-ms-transform: matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-webkit-transform: matrix(0.866,0.5,-0.5,0.866,0,0); /* Chrome, Safari, Opera */
transform: matrix(0.866,0.5,-0.5,0.866,0,0); /* Standard syntax */
}
This is the output of above mentioned code:
For detailed CSS3 2D transforms Methods, Visit Next Post.
Muhammad Arslan Aslam
I am a Full Time Student and occasional blogger. Software Engineering student with wide experience and interest in Front-End Web Development. You can find me on my profiles listed below and can get in touch any time.
Get Free Email Updates to your Inbox!
Post a Comment
Suggestions will be greeted.