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.

Written by Sandeep Likhar

Sandeep Likhar is from India, where he is a blogger, eBook designer, and founder of LetsDnD. He has 6 years of experience in the industry as a Digital Publishing Expert and eBook Converter, providing services to authors, publishers, and distributors worldwide. He is proficient in converting books into various formats, such as HTML, epub, mobi, word, PDF, including all major online platforms like iTunes, Kobo, Kindle, CreateSpace, B&N, Smashwords, and more.

Leave a Reply

Your email address will not be published. Required fields are marked *