CSS3 transforms extends CSS transforms to allow elements rendered by CSS to be transformed in three-dimensional space.In this chapter we will learn about some of 3D transforms methods:
- rotateX()
- rotateY()
The rotateX() method:
rotateX(angle) method, rotates any element around its X-axis at a given degree(angle).
Look at the example below:
div {
-webkit-transform: rotateX(120deg); /* Chrome, Safari, Opera */
transform: rotateX(120deg);
}
Output
The rotateY() method:
In rotateY() method, you can rotate any HTML element around its Y-axis at a given degree.
div {
-webkit-transform: rotateY(130deg); /* Chrome, Safari, Opera */
transform: rotateY(130deg);
}
Output
CSS3 transforms properties:
| Property | Description |
|---|---|
| transforms | Applies a 2D or 3D transformation to an element. |
| transform-origin | Allows you to change the position on transformed elements |
| transform-style | Specifies how nested elements are rendered in 3D space |
| perspective | Specifies the perspective on how 3D elements are viewed |
| perspective-origin | Specifies the bottom position of 3D elements |
| backface-visibility | Defines whether or not an element should be visible when not facing the screen |
| Source: W3Schools | |
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.