CSS 3d transform doesn’t work if perspective is set in the end of property

by

You should make the perspective first in both cases. If you add it at the end the translation will be first made without considering the perspective.

If we refer to the specification we can see how the transformation matrix is computed:

The transformation matrix is computed from the transform and
transform-origin properties as follows:

  1. Start with the identity matrix.

  2. Translate by the computed X and Y of transform-origin

  3. Multiply by each of the transform functions in transform property from
    left to right

  4. Translate by the negated computed X and Y values of transform-origin

As you can see in the step (3), it’s from left to right (here is another question where you can get more information and see why order is important: Simulating transform-origin using translate)

It also useless to use the perspective property within the element you want to transform.

box:nth-child(1):hover {
  transform: perspective(1000px) translate3d(0, 0, -100px);
}

box:nth-child(2):hover {
  transform: perspective(1000px) translate3d(0, 0, 100px);
}

box {
  padding: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: monospace;
  transition: transform .4s;
  background: rgba(255, 0, 0, 0.3);
  margin: 20px;
  /*perspective: 1000px;*/
  font-size: 12px;
  cursor: pointer;
}

box:nth-child(2) {
  background: rgba(0, 0, 255, 0.3);
}
<box>
  transform: perspective(1000px) translate3d(0,0,100px);
</box>
<box>
  transform:  perspective(1000px) translate3d(0,0,100px);
</box>

To avoid any confusion with order you can declare the persepective within a parent element BUT you need to pay attention to the origin as it won’t be the same:

box:nth-child(1):hover {
  transform:translate3d(0, 0, -100px);
}

box:nth-child(2):hover {
  transform:translate3d(0, 0, 100px);
}
body {
  perspective:1000px;
}
box {
  padding: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: monospace;
  transition: transform .4s;
  background: rgba(255, 0, 0, 0.3);
  margin: 20px;
  font-size: 12px;
  cursor: pointer;
}

box:nth-child(2) {
  background: rgba(0, 0, 255, 0.3);
}
<box>
  transform: perspective(1000px) translate3d(0,0,100px);
</box>
<box>
  transform:  perspective(1000px) translate3d(0,0,100px);
</box>

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. Hover effect : expand bottom border
  8. Simulating transform-origin using translate
  9. 3D CSS transform, jagged edges in Firefox
  10. How to prevent Webkit text rendering change during CSS transition
  11. Spin or rotate an image on hover
  12. CSS Transform Skew [duplicate]
  13. How can I apply multiple transform declarations to one element?
  14. How can I use CSS3 transform on a span?
  15. rotate3d shorthand
  16. CSS3 transform order matters: rightmost operation first
  17. Why is text getting blurry and wobbles during 2d scale transform
  18. CSS3 transform on click using pure CSS
  19. Flip a 3D card with CSS
  20. CSS3 Transform affecting other elements with chrome/safari
  21. Why is backface-visibility hidden not working in IE10 when perspective is applied to parent elements?
  22. Make CSS3 triangle with linear gradient
  23. 3d transforms on SVG element
  24. placing background image in a rhombus shaped container is causing the container to lose its shape
  25. CSS Transform with element resizing
  26. CSS3 3D Transform doesn’t work on IE11
  27. perspective and translateZ moves diagonally
  28. webkit transform blocking link
  29. Why does enabling hardware-acceleration in CSS3 slow down performance?
  30. How do I include a font awesome icon in my svg?

Leave a Comment