perspective and translateZ moves diagonally

Solution 1:

It's all a matter of perspective-origin that define how the changes should be visible to us.

If you read the same link you will notice this:

The vanishing point is by default placed at the center of the element, but its position can be changed using the perspective-origin property.

Here is some example where you can better understand:

.wrapper {
  position: relative;
  height: 100px;
  width: 100px;
  border: 1px solid;
  perspective: 10px;
  transform-style: preserve-3d;
}

.cube {
  width: 100%;
  height: 100%;
  background: red;
  animation: change 2s linear infinite alternate;
}

@keyframes change {
  to {
    transform: translateZ(-10px);
  }
}

moving from the center
<div class="wrapper">
  <div class="cube"></div>
</div>
moving from the left
<div class="wrapper" style="perspective-origin:left">
  <div class="cube"></div>
</div>
moving from a custom point
<div class="wrapper" style="perspective-origin:20% 80%">
  <div class="cube"></div>
</div>

You need to also pay attention when you deal with default block element having width:100% as the position will consider the parent element no the child one.

Remove width and see the difference:

.wrapper {
  position: relative;
  border: 1px solid;
  perspective: 10px;
  transform-style: preserve-3d;
}

.cube {
  width: 100px;
  height: 100px;
  background: red;
  animation: change 2s linear infinite alternate;
}

@keyframes change {
  to {
    transform: translateZ(-10px);
  }
}

moving from the center
<div class="wrapper">
  <div class="cube"></div>
</div>
moving from the left
<div class="wrapper" style="perspective-origin:left">
  <div class="cube"></div>
</div>
moving from a custom point
<div class="wrapper" style="perspective-origin:20% 80%">
  <div class="cube"></div>
</div>

In the above codes, the parent container is controlling the perspective. You can move this to the child element like this:

.wrapper {
  position: relative;
  border: 1px solid;
}

.cube {
  width: 100px;
  height: 100px;
  background: red;
  animation: change 2s linear infinite alternate;
}

@keyframes change {
  to {
    transform: perspective(10px) translateZ(-10px);
  }
}

moving from the center
<div class="wrapper">
  <div class="cube"></div>
</div>
moving from the left
<div class="wrapper" >
  <div class="cube" style="transform-origin:left"></div>
</div>
moving from a custom point
<div class="wrapper" >
  <div class="cube" style="transform-origin:20% 80%"></div>
</div>

As you can see, we control the origin using transform-origin because we are using perspective a transform-function and no more as a property.

Change perspective-origin and nothing will happen

.wrapper {
  position: relative;
  border: 1px solid;
}

.cube {
  width: 100px;
  height: 100px;
  background: red;
  animation: change 2s linear infinite alternate;
}

@keyframes change {
  to {
    transform: perspective(10px) translateZ(-10px);
  }
}

moving from the center
<div class="wrapper">
  <div class="cube"></div>
</div>
moving from the left
<div class="wrapper" style="perspective-origin:left">
  <div class="cube" style="perspective-origin:left"></div>
</div>
moving from a custom point
<div class="wrapper" style="perspective-origin:20% 80%">
  <div class="cube" style="perspective-origin:20% 80%"></div>
</div>

perspective and translateZ moves diagonally

Solution 1:

Related

Recent Posts