perspective and translateZ moves diagonally

by

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>

More Related Contents:

  1. CSS transform doesn’t work on inline elements
  2. How to apply multiple transforms in CSS?
  3. Rotated elements in CSS that affect their parent’s height correctly
  4. Why does applying a CSS-Filter on the parent break the child positioning?
  5. Prevent flicker on webkit-transition of webkit-transform [duplicate]
  6. Why does order of transforms matter? rotate/scale doesn’t give the same result as scale/rotate
  7. CSS 3d transform doesn’t work if perspective is set in the end of property
  8. Hover effect : expand bottom border
  9. Simulating transform-origin using translate
  10. 3D CSS transform, jagged edges in Firefox
  11. How to prevent Webkit text rendering change during CSS transition
  12. Spin or rotate an image on hover
  13. CSS Transform Skew [duplicate]
  14. How can I apply multiple transform declarations to one element?
  15. How can I use CSS3 transform on a span?
  16. rotate3d shorthand
  17. CSS3 transform order matters: rightmost operation first
  18. Why is text getting blurry and wobbles during 2d scale transform
  19. CSS3 transform on click using pure CSS
  20. Flip a 3D card with CSS
  21. CSS3 Transform affecting other elements with chrome/safari
  22. Why is backface-visibility hidden not working in IE10 when perspective is applied to parent elements?
  23. Make CSS3 triangle with linear gradient
  24. 3d transforms on SVG element
  25. placing background image in a rhombus shaped container is causing the container to lose its shape
  26. CSS Transform with element resizing
  27. CSS3 3D Transform doesn’t work on IE11
  28. webkit transform blocking link
  29. Why does enabling hardware-acceleration in CSS3 slow down performance?
  30. Should I use max-device-width or max-width?

Leave a Comment