CSS 3D transformation effect
In this blog post, I will show you how to create a stunning CSS 3D transformation effect that will make your web page look more dynamic and interactive. CSS 3D transformations allow you to manipulate an element in three-dimensional space using perspective and various transformation methods. You can rotate, scale, translate, and skew an element along the X, Y, and Z axes, creating a sense of depth and realism.
To use CSS 3D transformations, you need to apply the transform property to an element, and use one or more of the following 3D transformation functions:
- rotateX(angle): Rotates an element around its X-axis at a given angle.
- rotateY(angle): Rotates an element around its Y-axis at a given angle.
- rotateZ(angle): Rotates an element around its Z-axis at a given angle.
You can also use the transform-origin property to change the position of the transformed element, the transform-style property to specify how nested elements are rendered in 3D space, the perspective property to specify the perspective on how 3D elements are viewed, the perspective-origin property to specify the bottom position of 3D elements, and the backface-visibility property to define whether or not an element should be visible when not facing the screen.
To demonstrate how these properties and functions work, I will create a simple example of a card that flips on hover using CSS 3D transformations. Here is the HTML structure of the card:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>CSS 3D transformation </title>
</head>
<body>
<div class="perspective">
<img src="car.png">
<div class="bottom"><img src="car.png"></div>
<div class="left"><img src="car.png"></div>
</div>
</body>
</html>
CSS
body{
background-color: rgb(99, 86, 127);
}
.perspective {
position: relative;
width: 400px;
height: 500px;
transform-style: preserve-3d;
transition: all 500ms ease-in;
transform: rotateY(20deg) rotateX(60deg) rotateZ(-10deg);
transform: rotateY(15deg) rotateX(50deg) rotateZ(-15deg);
box-shadow: -40px 80px 80px -10px rgba(0, 0, 0, 0.7);
cursor: pointer;
margin-right: 30px;
display: inline-block;
margin-left: 30%;
}
.perspective img {
position: absolute;
top: 0px;
left: 0px;
width: 400px;
height: 500px;
transform: translateZ(16px);
}
.bottom,
.left {
position: absolute;
width: 400px;
height: 500px;
display: block;
transition: all 1s linear;
overflow: hidden;
border-radius: 3px;
transform: translateZ(16px);
filter: brightness(80%)
}
.left {
transform: rotateY(270deg) translateX(-1px);
transform-origin: center left;
width: 18px;
}
.bottom {
transform: rotateX(90deg) translateY(15px) translateZ(-480px);
transform-origin: bottom center;
height: 18px;
}
.bottom img {
transform: rotateX(180deg);
width: 100%;
height: 500px;
left: 0px;
}
For More Tutorials Please Click Here
