0

I'm not sure if I'm missing something with my understanding of translateZ but I've added a CodePen for the same.

Here's 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;
}

.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 facing is that the element .card-child isn't rising up out of the .card element as I'd like it to. The effect I'm going for is for each of the cards to rise up out of its parent. In this case, trying to get the yellow card to raise out of the green card

Kuday
  • 68
  • 1
  • 6
  • transform-style: preserve-3d; to the green element – Temani Afif Jan 31 '21 at 13:51
  • Although this question has been closed, just wanted to confirm that your answer was right. Thanks for that. @TemaniAfif – Kuday Feb 09 '21 at 20:30
  • it was closed with a question that give you the *right* answer (I have closed it) – Temani Afif Feb 09 '21 at 20:32
  • Yes, yes I'm aware of that. But you still provided a straightforward answer for me right here and that helped when reading the other answer. So thank you for that. – Kuday Feb 09 '21 at 20:47

0 Answers0