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!
---
3d
animation
bootstrap
css
design
effect
flat
html
interaction
landing
minimal
mouse
svg
torus kit
transform
ui
View all tags
Posted on
Dec 11, 2020
More by Torus Kit View profile
Like