Hey everyone, I've been silently observing for a while now and I'm hoping someone can assist me with a project. I want to create a responsive "3D" cube that flips when hovered over.
I've got the cube design nailed down after finding inspiration here. However, my struggle lies in making the cube responsive. It seems like the issue is with the translatez value needing to change dynamically based on the browser width.
/* Position the faces */
.flippety {
-webkit-transform: translateZ(100px);
transform: translateZ(100px);
}
In this scenario, the translatez controls the cube's "corner," which I need to adjust dynamically depending on the height of the cube.
My current setup utilizes a Bootstrap 12-grid layout with the cube's width set to 100%. Therefore, the cube's height adjusts according to the browser width. I require the "corner" of the cube (translatez) to adapt based on the cube's actual current height.
I've searched extensively for a simple explanation on how to achieve this without success. While browsing, I stumbled upon professional templates featuring responsive 3D cube portfolios. When resizing the window, I noticed they precisely modify the pixel values incrementally (+- 0.5px / step) based on the browser width using JS or jQuery. Though I'd rather not promote any specific template.
If anyone could provide some guidance, I would be extremely grateful.
Thanks in advance!