CSS 3D Clouds
How to use CSS 3D Transforms to create sprite-based 3D-like clouds.
There are several div
elements, distributed randomly with transform: translate3d()
inside a world div
that is rotated with transform: rotate3d()
using JavaScript in the onmousemove
handler.
Each cluster contains several div
elements with a cloud texture that are distributed in 3d with transform: translate3d() rotateZ() scale()
.
Every frame each layer is updated to face the camera, by rotating the sprite in X and Y the inverse amount of the rotation of the world.
There's a way more detailed step-by-step tutorial here: How to make clouds with CSS 3D.