I tried to transform my div with javascript after getting element by IDs. But i got nothing, it doesn't works.

Here is my code :

const sliderA = document.getElementById("obSlideTop1");
const sliderB = document.getElementById("obSlideTop2");
const flame = document.getElementById("THST");
flame.addEventListener('mouseover', () => {
  sliderA.style.transform = "translate(-3vw, -343vh);"

  sliderB.style.transform = "translate(3vw, -343vh);"
})

But when i tried to styling with something else like .backgroundColor or .opacity, it still works with them. object.style.transform is the only thing that have problem with me.

const sliderA = document.getElementById("obSlideTop1");
const sliderB = document.getElementById("obSlideTop2");
const flame = document.getElementById("THST");
flame.addEventListener('mouseover', () => {
  sliderA.style.transform = "translate(-3vw, -343vh);"
  sliderA.style.backgroundColor = "rgb(124, 1, 124)";
  sliderA.style.opacity = ".5"

  sliderB.style.transform = "translate(3vw, -343vh);"
  sliderB.style.backgroundColor = "rgb(233, 33, 33)";
  sliderB.style.opacity = ".5";

  console.log(sliderA,sliderB)
})

it have console output :

<div id="obSlideTop1" style="background-color: rgb(124, 1, 124); opacity: 0.5;"></div> 
<div id="obSlideTop2" style="background-color: rgb(233, 33, 33); opacity: 0.5;"></div>