I'm struggling to grasp the concepts of translateZ and perspective, so I've provided a CodePen link for reference.
Here is my code:
body {
margin: 0;
height: 100vh;
}
.cards-container {
padding: 100px;
margin: auto;
margin-top: 100px;
transform-style: preserve-3d;
}
.cards-container,
.cards-container * {
height: 400px;
width: 400px;
box-sizing: border-box;
background-color: lightgray;
transition: all ease 1.6s;
/* perspective: 1200px; */
}
.card {
width: 200px;
height: 200px;
padding: 50px;
background-color: lime;
transform-style: preserve-3d;
}
.card-child {
width: 100px;
height: 100px;
background-color: rgb(255, 230, 0);
}
.cards-container:hover {
transform: perspective(1200px) rotateX(50deg) rotateY(20deg) rotateZ(-35deg) translateZ(40px);
}
.cards-container:hover .card {
transform: perspective(1200px) translateZ(80px);
}
.cards-container:hover .card .card-child {
transform: perspective(1200px) translateZ(60px);
}<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<script src="index.js"></script>
<div class="cards-container">
<div class="card">
<div class="card-child"></div>
</div>
</div>
</body>
</html>The issue I'm experiencing is difficult to consistently replicate. When hovering over the cards in the example, the transitions usually work smoothly. The goal is for the three cards to transition from a flat layout to a 3D one upon hover, with each card moving above its parent. However, sometimes the transition becomes distorted and goes out of bounds on the z-axis when hovering on and off the cards multiple times. This issue seems related to the perspective property, but I am unsure how to troubleshoot it effectively.
If you have any insights or solutions to this problem, please feel free to share them.