CSS 3D Transforms

CSS 3D Transforms

In this tutorial, you will learn about CSS 3D Transforms is as follows-

3d transforms are also supported in css

Now we will look at some really good Examples -

The Explanation of each example will be give after each example -

Example 1 -

Compass pointer or needle shape using 3D transforms -

<!DOCTYPE html>
<html lang="en">

<head>
<style>
div.needle {
margin: 100px;
height: 150px;
width: 150px;
transform: rotateY(85deg) rotateZ(45deg);
/* presentational */
background-image: linear-gradient(to top left, #555 0%, #555 40%, #444 50%, #333 97%);
box-shadow: inset 6px 6px 22px 8px #272727;
}
</style>
</head>

<body>
<div class='needle'></div>

</body>

</html>

Output -

In the above example, a needle or compass pointer shape is created using 3D transforms.

Generally, when we apply the rotate transform on an element, the rotation happens only in the Z-axis and at best we will end up with diamond shapes only.

But when a rotateY transform is added on top of it, the element gets squeezed in the Y-axis and thus ends up looking like a needle.

The more the rotation of the Y-axis the more squeezed the element looks.

The output of the above example would be a needle resting on its tip.

For creating a needle that is resting on its base, the rotation should be along the X-axis instead of along Y-axis. So the transform property's value would have to be something like - rotateX(85deg) rotateZ(45deg)

Example 2 -

3D text effect with shadow -

<!DOCTYPE html>
<html lang="en">

<head>
<style>
*{margin:0;padding:0;}
html,body{height:100%;width:100%;overflow:hidden;background:#0099CC;}
#title{
position:absolute;
top:50%; left:50%;
transform:translate(-50%,-50%);
perspective-origin:50% 50%;
perspective:300px;
}
h1{
text-align:center;
font-size:12vmin;
font-family: 'Open Sans', sans-serif;
color:rgba(0,0,0,0.8);
line-height:1em;
transform:rotateY(50deg);
perspective:150px;
perspective-origin:0% 50%;
}
h1:after{
content:attr(data-content);
position:absolute;
left:0;top:0;
transform-origin:50% 100%;
transform:rotateX(-90deg);
color:#0099CC;
}
#title:before{
content:'';
position:absolute;
top:-150%; left:-25%;
width:180%; height:328%;
background:rgba(255,255,255,0.7);
transform-origin: 0 100%;
transform: translatez(-200px) rotate(40deg) skewX(35deg);
border-radius:0 0 100% 0;
}
</style>
</head>

<body>
<div id="title">
<h1 data-content="HOVER">HOVER</h1>
</div>

</body>

</html>

Output -