Dynamically change css property depending on browser width using jquery or js

Question

long time lurker here. I was hoping maybe one of you could help me out. Basically what I would like to do is create a responsive flipping "3d" cube that "flips" on hover.

The cube I have down. I built my own based on this for inspiration. The problem I have is making that cube responsive. I think I know the issue.. it´s that the translatez value needs to dynamically change depending on the browser width.

/* Position the faces */
.flippety {
-webkit-transform: translateZ(100px);
transform: translateZ(100px);
}

In this example translatez is responsible for the "corner" of the cube and I need it to change dynamically depending on the current height of the cube.

My actual setup uses a bootstrap 12 grid layout with the width of the cube set to 100%. This means the height of the cube is dynamically changing depending on the browser width. And I need the "corner" of the cube(translatez) to change depending on the actual current height of each cube.

I´ve tried my best in finding a basic explanation on how to achieve this successfully but I have come up empty. I have found professional templates that have responsive 3d cube portfolios and when resizing the window I can see that they do exactly as I suspected. They use JS or Jquery to change the value of pixels in small increments (+- 0.5px / step) depending on browser width. I would rather not link that template as I don´t want to turn this into an advertising opportunity for them.

Could anyone point me in the right direction? I would highly appreciate any help.

Thanks in advance :)

Answer 1

You can always apply CSS styles from javascript, try this

var obj = document.getElementById("object");
obj.style.transform = "translateZ(100px);";