Rotating box with 3D CSS3 animation and transforms of rotate and skew

Hint: Hovering the box with the blue border will make the inner frame which has the content Hello partiallty transparent so the outer box can also be observed. Only works in Safari.

Transforms on the x axis with rotateX and skewX

Example 1a: Uses two boxes. One outer frame and one inner nested frame which has the content Hello.

Hello

Example 1b: This is the outer frame which rotate on the x axis and has no perspective given.

Example 1c: This is the inner nested frame which has the content Hello and has 5 frame stops in it's transform.

Hello

Example 2: The same as example 1a but with perpective given to the outer frame.

Hello

Example 3a: The same as example 1a but with tranlation of z axis given to the outer frame.

Hello

Example 3b: The same as example 1a but with tranlation of z axis given to the outer frame.

Hello

Example 3c: The reverse of example 3b.

Hello

Transforms on the y axis with rotateY and skewY

Example 4a: Uses two boxes. One outer frame and one inner nested frame which has the content Hello.

Hello

Example 4b: This is the outer frame which rotate on the x axis and has no perspective given.

Example 4c: This is the inner nested frame which has the content Hello and has 5 frame stops in it's transform.

Hello

Example 5: The same as example 4a but with perpective given to the outer frame.

Hello

Example 6a: The same as example 4a but with tranlation of z axis given to the outer frame.

Hello

Example 6b: The same as example 4a but with tranlation of z axis given to the outer frame.

Hello

Example 6c: The reverse of example 3b.

Hello