1

i am making a project for fun, and it heavily relies on css transform. I tried to use the z-axis, but it appears to not work, please help!

HTML:

<img alt="Oops! Either the image couldn't load, or this isnt a valid link, reload and try again!" src="https://us.bravecto.com/wp-content/uploads/sites/188/2022/04/cats-bravecto-for-cats.png?w=283" id="cat">

JS:

const cat = document.getElementById('cat');

cat.animate([
   {
     transform: 'translate3D(0px, 0px, 400px)'
   },

   {
     transform: 'translate3D(0px, 0px, 0px)'
   }
])

It just wont bring the image forwards! Please help, thanks!

MrMarshmello Playz
  • 23
  • 4
  • 1
    Please setup a m-r-e: https://stackoverflow.com/help/minimal-reproducible-example – This Guy Dec 15 '22 at 18:06
  • 1
    It likely is actually working for you... Z "axis" is how "distance" from the observer. like layers, more than up and down... If you have not yet, please read through the web docs : https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate3d – This Guy Dec 15 '22 at 18:09

1 Answers1

0

The actual CSS first keyframe should look something like this: transform: perspective(1000px) translate3D(0px, 0px, 400px).

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

cyclingLinguist
  • 334
  • 1
  • 5
  • 16