Image is not moving with translateZ()-CodePudding

I'm trying to create a website with a few images. I wanted those images to move a little (just a little) when you scroll down. Background-attachement: fixed did not work for me as I just want a little movement, so I tried transform: translateZ() using a guide I found online. However, this does not work. The translateZ() does absolutely nothing to the image. Is this becase it is a background image instead of a regular image?

My code:

<div >
   <div src="" alt="" >
      <div ></div>
   </div>
</div>

My SCSS:

.skooma__section-1{
width: 90vw;
margin-top: 5rem;
display: flex;;
flex-direction: row;
align-items: center;
justify-content: space-around;

//parallax
overflow-x: hidden;
overflow-y: scroll;
perspective: 3px;
overflow-y: auto;
transform-style: preserve-3d;
}
.skooma__image-1{
height: 40rem;
width: 40rem;
clip-path: polygon(5% 15%, 80% 20%, 95% 85%, 20% 80%);

//parallax 
position: relative;
}
.image-1__image{
background-image: url(./media/skooma-1.jpg);
background-size: 40rem 40rem;
height: 40rem;
width: 40rem;

// parallax
transform: translateZ(10px);
z-index: -1;
}

CodePudding user response：

You need to set perspective as well. What perspective does is that it tells where the viewer is relative to the element, if it's not set or is smaller than translateZ the change is not visible.

transform: perspective(100px) translateZ(50px);

CodePudding user response：

The translateZ() repositions an element along the z-axis in 3D space. Only with css this effect will be always static. If you want an effect for the images to move only a little, only when you scroll, you need to do this and manipulate the DOM with javascript. You can do interesting effects on hover(when you put the mouse cursor on a image) to move a little bit for example with css animations. Also it's a good idea to insert a link with the effect you want to achieve if you see somewhere.