css3 // 3D Slinky

The 3D transforms in this demo work in latest Safari, latest Firefox, Microsoft Edge, Chrome, and versions of Opera running the Blink rendering engine.

Mouseover the slinky to expand it! It uses transform: rotateY() | rotateX(); with CSS 3D Transforms: transform-style: preserve3d; and perspective. It also uses CSS Animations for auto-rotation.

Rotate the slinky manually:
Add 5 segments