Transformations and transitions in CSS3

I have been thinking since long time ago into making a basic tutorial about transformations and transitions in CSS3. This kind of technique allows us to transform HTML elements and even animate them without appeal to JavaScript. Using CSS3 animations the calculations are made by the GPU instead of the CPU, and most of the time this ends in smoother and preciser animations because the calculations can be made using non-integer numbers.

In this tutorial, I’ll cover the transformations in two dimensions, in future tutorials we will deepen in three dimensions transformations.

In the code snippets, I’ve removed CSS vendor prefixes (-webkit and -moz) to make it shorter and easier to understand but the use of these prefixes is still needed at the moment, unless we use libraries like prefix-free or CSS pre-processor. On the other hand, I’ve removed some general styles and I’ve only included the transformations and transitions related styles. In the download files will be included all the styles.

CSS3 transformations

The transformations that can be applied to HTML elements are next:

• translate
• rotate
• scale
• skew

Translate

To translate an HTML element in two dimensions it is needed to use the next properties:

Property	Description
translateX(x)	Translate an element on X axis
translateY(y)	Translate an element on Y axis
translate(x, y)	Translate an element on both axes (X and Y)

Translate on X axis

/* HOVER STYLE */
#container:hover .circle1{ transform: translateX(50px); }
#container:hover .circle2{ transform: translateX(277px); }
#container:hover .circle3{ transform: translateX(504px); }

Result (enter and out the mouse from the box)

Download the example files.

Translate on Y axis

/* HOVER STYLE */
#container:hover .circle1{ transform: translateY(20px); }
#container:hover .circle2{ transform: translateY(60px); }
#container:hover .circle3{ transform: translateY(100px); }

Result (enter and out the mouse from the box)

Download the example files.

Translate on both axes (X and Y)

/* BASE STYLE */
#container .circle1{ transform: translate(0, -90px); }
#container .circle2{ transform: translate(77.942px, -45px); }
#container .circle3{ transform: translate(77.942px, 45px); }
#container .circle4{ transform: translate(0, 90px); }
#container .circle5{ transform: translate(-77.942px, 45px); }
#container .circle6{ transform: translate(-77.942px, -45px); }

/* HOVER STYLE */
#container:hover .circle1{transform: translate(0, -150px); }
#container:hover .circle2{ transform: translate(129.904px, -75px); }
#container:hover .circle3{ transform: translate(129.904px, 75px); }
#container:hover .circle4{ transform: translate(0, 150px); }
#container:hover .circle5{ transform: translate(-129.904px, 75px); }
#container:hover .circle6{ transform: translate(-129.904px, -75px); }

Result (enter and out the mouse from the box)

Download the example files.

Rotate

To rotate an HTML element in two dimensions it is needed to use the next properties:

Property	Description
rotate(angle)	Rotate an element through the defined angle value

/* HOVER STYLES */
#container:hover .square1{ transform: rotate(10deg); }
#container:hover .square2{ transform: rotate(20deg); }
#container:hover .square3{ transform: rotate(30deg); }

Result (enter and out the mouse from the box)

Download the example files.

Scale

To scale an HTML element in two dimensions it is needed to use the next properties:

Property	Description
scaleX(x)	Scale an element on X axis
scaleY(y)	Scale an element on Y axis
scale(x, y)	Scale an element on both axes (X and Y)

Scale an element on X axis

/* HOVER STYLE */
#container:hover .square1{ transform: scaleX(1.25); }
#container:hover .square2{ transform: scaleX(1.5); }
#container:hover .square3{ transform: scaleX(2); }

Result (enter and out the mouse from the box)

Download the example files.

Scale an element on Y axis

/* HOVER STYLE */
#container:hover .square1{ transform: scaleY(1.25); }
#container:hover .square2{ transform: scaleY(1.5); }
#container:hover .square3{ transform: scaleY(2); }

Result (enter and out the mouse from the box)

Download the example files.

Scale on both axes

/* HOVER STYLES */
#container:hover .square1{ transform: scale(1.25, 2); }
#container:hover .square2{ transform: scale(1.5, 1.5); }
#container:hover .square3{ transform: scale(2, 1.25); }

Result (enter and out the mouse from the box)

Download the example files.

Skew

To skew an HTML element in two dimensions it is needed to use the next properties:

Property	Description
skewX(angle)	Skew an element on X axis
skewY(angle)	Skew an element on Y axis
skew(angleX, angleY)	Skew an element on both axes (X and Y)

Skew an element on X axis

/* HOVER STYLES */
#container:hover .square1{ transform: skewX(20deg); }
#container:hover .square2{ transform: skewX(30deg); }
#container:hover .square3{ transform: skewX(40deg); }

Result (enter and out the mouse from the box)

Download the example files.

Skew an element on Y axis

/* HOVER STYLES */
#container:hover .square1{ transform: skewY(20deg); }
#container:hover .square2{ transform: skewY(30deg); }
#container:hover .square3{ transform: skewY(40deg); }

Result (enter and out the mouse from the box)

Download the example files.

Skew on both axes

/* HOVER STYLES */
#container:hover .square1{ transform: skew(10deg, 40deg); }
#container:hover .square2{ transform: skew(30deg, 30deg); }
#container:hover .square3{ transform: skew(40deg, 10deg); }

Result (enter and out the mouse from the box)

Download the example files.

CSS3 transitions

CSS transitions allow us to animate an HTML element. Using transitions, the transformations are not executed suddenly, they are executed gradually creating an animation. There are two parameters that are mandatory to create a CSS3 transition, one defines the affected properties (transition-property) and the second is the duration of the animation (transition-duration):

transition-property

This parameter specifies the properties that will be affected for the transition, the rest of the properties not included in this parameter will not animate and the change will be executed without any transition. If one wants that all the properties of an element change with a transition, one needs to set this parameter in all.

transition-duration property

This parameter specifies the animation duration in seconds or milliseconds, if this value is not set its default value will be 0 and no transition will occur.

Let’s see how to use these parameters using one of the previous examples and next I’ll explain the rest of optional parameters that can be used in a CSS3 transition.

CSS code

/* BASE STYLE */
.square{
	background: #e87a24;
	transition-duration: 1s;
	transition-property: transform, background;
}
/* HOVER STYLE */
#container:hover .square1{
	background: #cb6414;
	transform: rotate(10deg);
	transition-duration: 0.5s;
}
#container:hover .square2{
	background: #a74e09;
	transform: rotate(20deg);
	transition-duration: 1s;
}
#container:hover .square3{
	background: #7c3904;
	transform: rotate(30deg);
	transition-duration: 1.5s;
}

Result (enter and out the mouse from the box)

Download the example files.

transition-timing-function property

This parameter specifies the acceleration curve of the animation. These are the main values that can be assigned to this property:

/* BASE STYLES */
.circle{
	background: #e87a24;
	transition-duration: 1s;
	transition-property: transform, background;
}
/* HOVER STYLES */
#container:hover .circle{ transform: translateY(120px); }

#container .circle1{ transition-timing-function: ease; }
#container .circle2{ transition-timing-function: ease-in; }
#container .circle3{ transition-timing-function: ease-out; }
#container .circle4{ transition-timing-function: ease-in-out; }
#container .circle5{ transition-timing-function: linear; }

Result (enter and out the mouse from the box)

Download the example files.

transition-delay property

It specifies in seconds or milliseconds a delay to start the animation, let’s see an example using one of the previous examples:

Código CSS

/* BASE STYLES */
.circle{
	background: #e87a24;
	transition-duration: 1s;
	transition-property: transform;
}
#container .circle1{ transform: translate(0, -90px); }
#container .circle2{
	transform: translate(77.942px, -45px);
	transition-delay: 0.25s;
}
#container .circle3{
	transform: translate(77.942px, 45px);
	transition-delay: 0.35s;
}
#container .circle4{
	transform: translate(0, 90px);
	transition-delay: 0.45s;
}

#container .circle5{
	transform: translate(-77.942px, 45px);
	transition-delay: 0.55s;
}

#container .circle6{
	transform: translate(-77.942px, -45px);
	transition-delay: 0.65s;
}
/* HOVER STYLES */
#container:hover .circle1{ transform: translate(0, -150px) scale(0.75, 0.75); }
#container:hover .circle2{ transform: translate(129.904px, -75px) scale(0.65, 0.65); }
#container:hover .circle3{ transform: translate(129.904px, 75px) scale(0.55, 0.55); }
#container:hover .circle4{ transform: translate(0, 150px) scale(0.45, 0.45); }
#container:hover .circle5{ transform: translate(-129.904px, 75px) scale(0.35, 0.35); }
#container:hover .circle6{ transform: translate(-129.904px, -75px) scale(0.25, 0.25); }

Result (enter and out the mouse from the box)

Download the example files.

Shorthand notation

The properties of a transition, as other CSS properties, can be written in shorthand notation. This is the syntax:

transition: transition-property transition-duration transition-timing-function transition-delay;

So, next properties:

.circle{
	transition-property: all;
 	transition-duration: 1.25s;
	transition-timing-function: ease-in;
	transition-delay: 1s;
}

Can be shortened in a single line as:

.circle{
	transition: all 1.25s ease-in 1s;
}

This is an extensive topic, so, in future tutorials I’ll cover CSS3 transformations and transitions increasing the complexity of them.