Ajax Loader
×

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.

Related:

×

Coding Preferences


HTML

CSS

Javascript

More

5 Comments

× New

Sign In to comment

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript
    CSSDeck G+