CSS transform: translate3D not working on z-axis

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!