CODEWITHSUNDEEP
htmlcsstransform
Eva
Eva

Reputation: 294

Why doesn't transform-style: preserve-3d work?

As far as I understand, transform-style: preserve-3d; property applies to the element and allows one to be positioned in a three-dimensional space. But I don't see any difference with and without transform-style: preserve-3d; property.

So, I have two examples.

  1. With using transform-style: preserve-3d;

.parent {
  width: 60%;
  height: 300px;
  border: 1px solid black;
  display: flex;
  justify-content: space-around;
  perspective: 600px;
}

.child {
  width: 50px;
  height: 50px;
  background: yellowgreen;
  display: inline-block;
  transform: rotateY(45deg);
  transform-style: preserve-3d;
}

.child:hover {
  transform: rotateX(-360deg);
}
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

  1. Without using transform-style: preserve-3d;

.parent {
  width: 60%;
  height: 300px;
  border: 1px solid black;
  display: flex;
  justify-content: space-around;
  perspective: 600px;
}

.child {
  width: 50px;
  height: 50px;
  background: yellowgreen;
  display: inline-block;
  transform: rotateY(45deg);
}

.child:hover {
  transform: rotateX(-360deg);
}
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

So, what's the difference? As for me, these two examples look the same. Thank you in advance

Upvotes: 0

Views: 2546

Answers (1)

Egor Sanko
Egor Sanko

Reputation: 56

'Preserve-3d' would make an impact on your example if you were to have elements that are overlapping. Because none of your squares are actually sitting on top of each other, but rather are split-apart - you don't see any difference.

Check this article on CSS-Tricks It has a very self-explanatory example in the very beginning, images included so you will see and understand the difference.

Upvotes: 2

Related Questions