All Categories

Introduction To CSS3 3D Transforms

In this blog, we will be looking into 3D transformation.
3D transformation is different from 2D as we can move our elements not only with respect to X and Y axis but also Z-axis.
 

3D transform functions

As a web designer, you’re probably well acquainted with working in two dimensions, X and Y, positioning items horizontally and vertically. With a 3D space initialized with perspective, we can now transform elements in all three glorious spatial dimensions, including the third Z dimension.
3D transforms use the same transform property used for 2D transforms. If you’re familiar with 2D transforms, you’ll find the basic 3D transform functions fairly similar.
 
“Before understanding the different 3d function we would like to mention while discussing 3d transform we should know what is a perspective? “
Please note the perspective property doesn’t affect how the element is rendered; it simply enables a 3D-space for children elements. This is the main difference between the transform: perspective() function and the perspective property. The first gives element depth while the later creates a 3D-space shared by all its transformed children.
How to use the perspective property let’s understand.

transform: perspective( 600px );
perspective: 600px;

The difference is transformed: perspective(600px);  the perspective is applied from the transform directly to children.

<div class="parent perspective">
  <h1>Using perspective property on parent</h1>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div><!--
--><div class="parent transform">
  <h1>Using transform: perspective() on children</h1>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>
* {
  box-sizing: border-box;
}
body {
  font-size: 20px;
}
.parent {
  width: 50%;
  display: inline-block;
  padding: .5em;
}
.parent.perspective {
  perspective: 50em;
}
.child {
  margin: .5em;
  width: 3em;
  height: 3em;
  background: tomato;
  display: inline-block;
  border: 1px solid rgba(0,0,0,.5);
}
.parent.perspective .child {
  transform: rotateX(50deg);
  background: tomato;
}
.parent.transform .child {
  transform: perspective(50em) rotateX(50deg);
  background: deepskyblue;
}
h1 {
  font-size: 1em;
}

The above demo aims at showing the difference between the function and the property.
you can see the property applied to the parent (perspective: 50em) of transformed elements (transform: rotateY(50deg)). the perspective is applied from the transform directly on children (transform: perspective(50em) rotateY(50deg)).
The perspective is applied from the transform directly on children (transform: perspective(50em) rotateY(50deg)).
This shows how setting perspective on the parent make all children share the same 3D-space and thus the same vanishing point.
Now let’s understand what how to use certain function of 3d effect transform.
rotateX( angle )
rotateY( angle )
rotateZ( angle )
translateZ( tz )
scaleZ( sz )
Whereas translateX() positions an element along the horizontal X axis, translateZ() positions it along the Z axis, which runs front to back in 3D space. Positive values position the element closer to the viewer, negative values further away.
The rotate functions rotate the element around the corresponding axis. This is a bit counter-intuitive at first as you might imagine that rotateX will spin an object left to right. Instead, using rotateX( 45deg ) rotates an element around the horizontal X axis, so the top of the element angles back and away, and the bottom angles near.

Pro-tip: This transformfoo3d() functions also have the benefit of triggering hardware acceleration in Safari.

 

TranslateZ(tz)

The translateZ() CSS function moves affected elements along the z-axis of the 3D space; that is, closer to or farther away from the viewer. This transformation is defined by a <length> which specifies how far inward or outward the element or elements move.
Let’s take an example to understand the use of TranslateZ.
In an example, two boxes we will create. One is positioned normally on the page without being translated at all. The second is presented by applying perspective to create a 3D space, then moving the element toward the user.

<p>Hello</p>
<p class="transformed">Acadgild!</p>

The first paragraph in the HTML above is plain; the second one, however, has the class “transformed” applied, which will add the perspective and translation to pull the element toward the user (essentially rendering it larger on a 2D display).

p {
  position:relative;
  width: 50px;
  height: 50px;
  left: 200px;
  background-color: teal;
}
.transformed {
  transform: perspective(500px) translateZ(200px);
}

While the CSS for is<p> unremarkable here, what really matters is the class “transformed”. Let’s take a look at what it does.
First, perspective is used to position the viewer relative to the plane that lies upon the plane that plane where Z=0 (in essence, the surface of the screen). A value of 500px means the user is 500 pixels in front of (outward from the screen from) imagery located at Z=0.
Then, the functiontranslateZ() is used to move elements with the class “transformed” 200 pixels outward from the screen, toward the user. This will have the effect of making the elements appear larger when viewed on a 2D display, or closer when viewed using a VR headset or other 3D display device.
The 3D transformation methods are:
⦁ translate3d(x,y,z)
⦁ scaleX(x), scaleY(y), scaleZ(z)
⦁ rotateX(angle), rotateY(angle), rotateZ(angle)
⦁ matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

1.RotateX(angle)

The rotateX() method rotates an element around its X-axis at a given degree.
The example of RotateX is:

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 80px;
background-color: #F15A29;
border: 1px solid black;
}
div#skew_div {
transform: rotateX(150deg);
}
</style>
</head>
<body>
<div style="margin-left:20px;">
div element.
</div>
<div id="skew_div" style="margin-left:20px;">
This div element after rotating 150deg.
</div>
</body>
</html>

The output will be:
CSS3 3D

2.RotateY(angle)

The rotateY() method rotates an element around its Y-axis at a given degree.
The example code:

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 80px;
background-color: #F15A29;
border: 1px solid black;
}
div#skew_div {
transform: rotateY(130deg);
}
</style>
</head>
<body>
<div style="margin-left:20px;">
div element.
</div>
<div id="skew_div" style="margin-left:20px;">
This div element after rotating Y 130deg.
</div>
</body>
</html>

The output will be:
CSS3 3D

Android Programming

3.RotateZ(angle)

The rotateZ() method rotates an element around its Z-axis at a given degree.
The code for rotatingZ:

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 80px;
background-color: #F15A29;
border: 1px solid black;
}
div#skew_div {
transform: rotateZ(130deg);
}
</style>
</head>
<body>
<div>
div element.
</div>
<div id="skew_div">
This div element after rotating Z 130deg.
</div>
</body>
</html>

The output will be:
CSS3 3D
 

More examples on RotateY(angle)

Take any image and write down your HTML file. We hope you are now familiar with writing your HTML file and linking your css file.
The below code justifies the Flip action using RotateY transform property.
/* Note: You could, of course, target the image class directly with “image:hover”. However, using the hover on the parent container is preferred here, because it results in a smoother flip animation in all modern browsers. Make sure the container has the same width and height as the image. */

.container:hover .image{
-webkit-transform: rotateY(180deg);
-webkit-transform-style: preserve-3d;
transform: rotateY(180deg);
transform-style: preserve-3d;
}
.container .image, .container:hover .image {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}

Vertical card flip

.carddiv {
width:200px; height:150px; position:relative;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 100% 75px;
-webkit-transition: all 0.7s ease;
transform-style: preserve-3d;
transform-origin: 100% 75px;
transition: all 0.7s ease;
}
.container:hover .carddiv {
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
.frontofcard, .backofcard {
width:200px; height:150px; position:absolute; left:0;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
}
.backofcard {
padding-top:50px;
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
HTML
<div class="container">
<div class="carddiv">
<img class="frontofcard" src="img" alt="img">
<p class="backofcard">Text</p>
</div>
</div>

/* Note: Keep in mind, that IE does NOT support “transform-style: preserve-3d;” yet, so IE-users will just see a basic vertical image flip animation without additional use of javascript/jQuery. This may change in the future. */

Conclusion:

I hope this Blog was informative about 3D transformation. If you have any query do write to us at [email protected]
Keep visiting our website Acadgild for more updates on Frontend and other technologies. Click here to learn Frontend Web Development.

AngularJS course details

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Articles

Close
Close