Web Development

CSS3 Transformers in 3D

CSS3 Transformers in 3D is the section 8 of Basics of CSS3.

You already know what kind of things that CSS3 offers with 2D transformation. Not only 2D, it also offers 3 dimensional transformations. So in this section, we are going to look at what kind of transformations that comes with 3D.

We will demonstrate two of transformation methods in this section. But actually 3D transformation comes in handy, when you use it with some animations. But this is not the time to demonstrate animations in CSS3, and we promised you we will cover up that with another section. So you will see, the examples we demonstrated here will not make any sense, but remember it will comes useful with an animation.

  • rotateX()
  • rotateY()

Let’s look at each of them.

The RotateX Method

 

With the rotateX() method, the element rotates around its X-axis at a given degree. Remember to put the additional X in the end of the method. If not it goes as a 2D transform method.

[code language=”css”] div{
transform: rotateX(120deg);
}
[/code]
This is a normal division.
This is a transformed division.

Actually what you see is doesn’t make sense. But if you animate this division element with rotateX() method, you will see gradually how this division element rotate around X axis in 3 dimensional space.

The RotateY Method

 

With the rotateY() method, the element rotates around its Y-axis at a given degree. Remember to put the additional Y in the end of the method. If not it goes as a 2D transform method.

[code language=”css”] div{
transform: rotateX(120deg);
}
[/code]
This is a normal division.
This is a transformed division.

Actually what you see is doesn’t make sense. But if you animate this division element with rotateY() method, you will see gradually how this division element rotate around Y axis in 3 dimensional space.

 

Other 3D Transform Methods

Other than the rotate methods there are lot of other methods that you can tryout. As you did most of the 2D transform methods such like translate and scale, you’ll find the following 3D methods are lot more easier than them.

Function Description
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Defines a 3D transformation, using a 4×4 matrix of 16 values
translate3d(x,y,z) Defines a 3D translation
translateX(x) Defines a 3D translation, using only the value for the X-axis
translateY(y) Defines a 3D translation, using only the value for the Y-axis
translateZ(z) Defines a 3D translation, using only the value for the Z-axis
scale3d(x,y,z) Defines a 3D scale transformation
scaleX(x) Defines a 3D scale transformation by giving a value for the X-axis
scaleY(y) Defines a 3D scale transformation by giving a value for the Y-axis
scaleZ(z) Defines a 3D scale transformation by giving a value for the Z-axis
rotate3d(x,y,z,angle) Defines a 3D rotation
rotateZ(angle) Defines a 3D rotation along the Z-axis
perspective(n) Defines a perspective view for a 3D transformed element

As you know now, both transformations in 2 dimensional and 3 dimensional space, we can move into give some motion into it. So what we are going to do in the next section is that task. So what learned in this section is not a waste, because we’re going to use them in the next section.

WHAT’S NEXT?

Explore CSS3 with Motion.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW

About the author

Sandeep Likhar

Sandeep Likhar from Indore India, Blogger, eBook Designer and Founder of LetsDnD. Having five years of experience in industry as a Digital Publishing Expert and eBook Converter providing services to Authors, Publishers and distributors worldwide. Proficient in converting books into various formats HTML, epub, mobi, word, PDF including all major online platforms iTunes, Kobo, Kindle, Createspace, B&N, Smashwords and more.

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz
DON’T MISS OUT!
Subscribe To Newsletter
Be the first to get latest updates and exclusive content straight to your email inbox.
Stay Updated
Give it a try, you can unsubscribe anytime.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW