Test with CSS3

Note: If no menu appears above, please refresh the page.

This page showcases the best of my CSS3 demonstrations. Other CSS3 demonstrations can be found in this directory which leads on to other directories.

Animation with 3D transforms

Animated color cube showing sRGB color-space The original animated color cube: Spiraling color cubes using 3D transforms. The first demonstration shows RGB color-space where the second demonstration has faces with linear gradients (view with Safari 5, iPad or iPhone).

Rolling box with transforms and Pi Rolling box with transforms with paused start: The demonstrations show cubes (they could be circles) that appear to being rolling from left to right by using rotate on an element inside a frame that moves towards the right. There are various examples on each test page with different timings.
Rotating box with transforms of rotate and skew: A demonstration showing rotating (horizontally) and skewing (vertically) boxes by using frames.

Gradient Art: Creating color blocks with multiple backgrounds using CSS gradients and background-size.
Repeating Linear Gradients with color stops: Using the CSS3-Images property repeating-linear-gradient to create amazing gradients (Works best in Firefox and Opera).

Background shorthand with background-size: Using the long awaited forward slash '/' in background shorthand along with background-size (view in IE9 and IE10).

Transformed element using SVG and transition: Demonstration showing elements with backgrounds using SVGs that rotate on the y axis when hovering. The animation is achieved with transition.
Expanding tabs with transition in duration and delay: A demonstration of an expanding tab menu using many CSS3 affects such as border-radius, multiple backgrounds, gradients as well as hover affect with generated content (works best in Firefox 4).

Created: 30th January 2011
Last updated: 26th May 2011.