CSS 3D Transform with Torus Kit
Pointer-based CSS 3D transform made easy with Torus Kit. Moving your mouse will rotate the base element in 3D space.
To create a different 3D blocks we have created 10 duplicates of original SVG image, stack them using absolute position, and give each block a different ".sq*" class.
But each block layer has to be positioned with different translateZ. This is no deal for Torus Kit "Incrementing" function. Just use z-level[(0+)] :) The code is super simple:
data-fx-group="
.sq1 => z-level[(0+0.4vmax)];
.sq2 => z-level[(0+0.6vmax)];
...
.sq10 => z-level[(0+0.5vmax)];
">
Check the live version here: https://toruskit.com/examples/experiments/3d-transform/
Make sure to subscribe!
---