CSS3 Transitions and Transforms Examples

Using CSS3 Transitions and Transforms can be very funny. Today we'll use webkit transitions.

The webkit browsers (Google Chome and Safari) can use the CSS3 Transitions and Transforms.

I made some examples for you 😉

Transitions

You can use:

transition-property : What property should animate. (e.g., opacity).
transition-duration: How long the transition should be (e.g., 1s)
transition-timing-function: The timing function for the transition (e.g., linear, ease-in).
transition: A shorthand for all properties.

-webkit-transition:color 1s ease-in;

Webkit Transform

The Webkit transform can be used to move objects and transform objects. Check out the list of options below:

scale, scaleX, scaleY

Scale an object around the origin. (e.g., 1, 2, 3).

Use negative if you want to flip the object (e.g., -1,-2,-3).

-webkit-transform:scale(2);

rotate

Rotate an object around the origin. (e.g., 90deg, 189deg).

-webkit-transform:rotate(90deg);

translate, translateX, translateY

Translate an object. These functions take lengths or percentages as arguments.

Percentages are relative to the border box of the object.

-webkit-transform:translate(50%);

skew, skewX, skewY

Skew an object. These functions take CSS angles.

-webkit-transform:skew(90deg);

Full Code





Example 12 | Developer's Blog

CSS3 Transitions

(This example only will work on Google Chrome and Safari)

2) Come here
3) Touch the image
4) More transform

About Rick

Senior Front-end Software Engineer from Barcelona, Haidong Gumdo Instructor (korean martial art of the sword), street photographer, travel lover, TV addict, Boston Red Sox fan, and privacy advocate.
One comment

Leave a Reply

Add <code> Some Code </code> by using this tags.

*
*