CSS3 3D Transforms: rotateX() , rotateY()

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.


Copyright © CSS3 (Web Designing) | Designed By Code Nirvana