CSS3 Transition, Transform, Animation Demo

CSS Driven Animation of Elements

Supported in Firefox, Webkit, Opera (not in IE or Opera Mini)

Runs best in Webkit (Chrome, Safari)

Rotate Element Y-Axis

Speed: 3sec/180deg

Easing: Ease-Out

Keyframes: 3

Iterations: Infinite

DEMO BLOCK

Rotate Element X-Axis

Speed: 3sec/180deg

Easing: Ease-Out

Keyframes: 3

Iterations: Infinite

DEMO BLOCK

FRONT
BACK

Rotate Element: Y-Axis

Transform Origin: Left Center

Speed: 3 seconds each 180 degrees

Easing: Ease-Out (fast start, slow end)

Number of Keyframes: 2

Number of iterations: Infinite

FRONT

Rotate Element: X-Axis

Transform Origin: Center Bottom

Speed: 3 seconds each 180 degrees

Easing: Ease-Out (fast start, slow end)

Number of Keyframes: 2

Number of iterations: Infinite

Let's insert a transition inline here.