CSS isometric 3D layer effect on hover
If you want to create stunning CSS isometric 3D layer effects on your web pages, you need to learn how to use CSS 3D transforms. CSS 3D transforms allow you to manipulate elements in a three-dimensional space, creating realistic animations and transitions that can enhance the user experience.
In this blog post, we will explain the basics of CSS 3D transforms, such as translation, rotation, scaling, perspective, and transform-style. We will also show you how to use PostCSS Cascade Layers, a plugin that helps you organize your CSS code into layers and control the stacking order of 3D elements.
1. What are CSS 3D Transforms?
CSS 3D transforms are an extension of the CSS 2D transforms, which let you change the position, size, and orientation of an element on a two-dimensional plane. CSS 3D transforms add a third dimension, the z-axis, which allows you to move and rotate elements along the depth axis, creating a sense of depth and perspective.
To use CSS 3D transforms, you need to apply the `transform` property to an element, and specify one or more transform functions that define how the element should be transformed. For example, the following code applies a 3D rotation to a div element:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Layer</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
<li>
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span>
<span>3D</span>
</a>
</li>
</ul>
</body>
</html>
CSS
body {
display: flex;
align-items: center;
justify-content: center;
background: #262626;
height: 100vh;
}
ul {
position: relative;
display: flex;
align-items: center;
justify-content: center;
transform-style: preserve-3d;
transform: rotate(-25deg) skew(25deg);
}
ul li {
position: relative;
list-style: none;
width: 100px;
height: 100px;
margin: 10px 10px;
}
ul li::before {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 100%;
height: 10px;
background: #bd61d3;
transform-origin: top;
transform: skewX(-41deg);
}
ul li::after {
content: '';
position: absolute;
top: 0;
left: -9px;
height: 100%;
width: 9px;
background: #9d81ce;
transform-origin: right;
transform: skewY(-49deg);
}
ul li span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex !important;
align-items: center;
background: #b283e5;
color: #0cf72c;
font-size: 5em !important;
transition: all .2s;
font-weight: bold;
}
ul li:hover span {
z-index: 1000;
transition: all .5s;
color: #fff;
box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.05);
}
ul li:hover span:nth-child(5) {
transform: translate(40px, -40px);
opacity: 1;
}
ul li:hover span:nth-child(4) {
transform: translate(30px, -30px);
opacity: .8;
}
ul li:hover span:nth-child(3) {
transform: translate(20px, -20px);
opacity: .6;
}
ul li:hover span:nth-child(2) {
transform: translate(10px, -10px);
opacity: .4;
}
ul li:hover span:nth-child(1) {
transform: translate(0, 0);
opacity: .2;
}
For More Tutorials Please Click Here
