Animation with CSS3: 2D transformations

In this post, I’ll continue on discovering what animations can be applied to HTML elements. I’ll be looking at 2D transformations; effects that move, rotate, skew, and scale elements.

Transformations are a type of transition effect in CSS3. If you’re not familiar with CSS3 transitions already and how they work, it might be a good idea to read my introductory article on it first.

Please note: I have not included vendor prefixes within my markup examples, as it would just take up too much needless space, so if you’re not using PrefixFree like I am, you’ll need to add these in yourself for the different browsers.

2D transformation examples

I’m going to go through some 2D transform examples and provide the markup for each one. For each example I’ll use a div styled to be a 200×200 pixel square with a blue background and the transition will happen on the hover state (when the mouse is passed over the element) for simplicity’s sake.

Translation

To translate an element means to change its location from where it originally was.

Horizontal translation

In my example below, the div moves 200 pixels to the right over two seconds on the hover state.


Horizontally translating a div element

View demo

The markup

The transition property is added to the CSS styles for the div where I have specified that all the properties of the div will be affected by the transition, it will last two seconds and the easing set to ease-in-out, which means that the animation will start off slow, speed up in the middle and slow down towards the end.

Then on the hover state, the transform property is added along with the value translate and numbers specifying how many pixels to move the element. The first number is the horizontal (X) value and the second is the vertical (Y) value. Therefore to move the element horizontally only, the first number needs to be a pixel value and the second should be set to zero.

View markup

CSS portion
div {
	transition: all 2s ease-in-out;
}

div:hover {
	transform: translate(200px,0);
}
HTML portion
<div></div>

Vertical translation

In this example, the div moves 200 pixels downwards on the hover state.


Vertically translating a div element

View demo

The markup

To move the element vertically only, on the hover state, the X value of the transform property needs to be set to zero and the Y value needs to be a pixel value.

View markup

CSS portion
div {
	transition: all 2s ease-in-out;
}

div:hover {
	transform: translate(0,200px);
}
HTML portion
<div></div>

Diagonal translation

The div moves 200 pixels to the right and 200 pixels upwards at the same time on the hover state, making it look like it is travelling diagonally.


Diagonally translating a div element

View demo

The markup

To move the element diagonally, both the X and Y values should be pixel values. In my example, the Y value is set to a minus number to move the shape upwards.

View markup

CSS portion
div {
	transition: all 2s ease-in-out;
}

div:hover {
	transform: translate(200px,-200px);
}
HTML portion
<div></div>

Rotation

Elements can also be rotated with a transition. By default, the rotation point will be the centre of the element but this can be changed, as I’ll explain in a minute…

Clockwise rotation

In this example, the div is rotated 180° clockwise over two seconds on the hover state.


Rotating a div element clockwise

View demo

The markup

The value of rotate is added to the transform property, and a degree value is placed in brackets after this.

View markup

CSS portion
div {
	transition: all 2s ease-in-out;
}

div:hover {
	transform: rotate(180deg);
}
HTML portion
<div></div>

Anti-clockwise rotation

In this example, the div is rotated 180° anti-clockwise on the hover state.


Rotating a div element anti-clockwise

View demo

The markup

To rotate the element in the opposite direction, the degree value in the brackets needs to be a minus number.

View markup

CSS portion
div {
	transition: all 2s ease-in-out;
}

div:hover {
	transform: rotate(-180deg);
}
HTML portion
<div></div>

Rotating around an origin point

The default rotation point is the centre of the element; this can be changed by adding another property into the styles for that element. In my example, I’m rotating the div around its top right corner on the hover state.


Rotating a div element around a specific origin point

View demo

The markup

An additional property transform-origin is added to the styles for the element with X and Y values as values. In my example I have set the first value (the X value) to 100px, which is the width of the div and the second value (the Y value) to 0, which means the origin point will be set to the top right of the element and it will rotate around this when the transition is activated on the hover state.

View markup

CSS portion
div {
	transition: all 2s ease-in-out;
	transform-origin: 100px 0;
}

div:hover {
	transform: rotate(360deg);
}
HTML portion
<div></div>

Skewing

Skewing is distorting a shape by moving two parallel sides in opposite directions at a certain angle… all should be clear in the examples!

Horizontal skew

Here the div is skewed horizontally by 30° on the hover state over 2 seconds.


Skewing a div element horizontally

View demo

The markup

The value of skew is added to the transform property, and two degree values are placed in brackets after this; the first is the X value and the second is the Y. Therefore as I just wanted to skew the element horizontally, I have just entered the X value and left the Y value at zero.

View markup

CSS portion
div {
	transition: all 2s ease-in-out;
}

div:hover {
	transform: skew(30deg,0);
}
HTML portion
<div></div>

Vertical skew

Here the div is skewed vertically by 30° on the hover state.


Skewing a div element vertically

View demo

The markup

In this example I just wanted to skew the element vertically, so I have just entered the Y value and left the X value at zero.

View markup

CSS portion
div {
	transition: all 2s ease-in-out;
}

div:hover {
	transform: skew(0,30deg);
}
HTML portion
<div></div>

Horizontal and vertical skew

Here the div is skewed horizontally by 30° and vertically by 20° on the hover state.


Skewing a div element vertically and horizontally

View demo

The markup

In this example I entered values for both the X and Y values, so the element skews in both directions.

View markup

CSS portion
div {
	transition: all 2s ease-in-out;
}

div:hover {
	transform: skew(30deg,20deg);
}
HTML portion
<div></div>

Scaling

Scaling is changing the size of an element by either enlarging it or shrinking it.

Enlarge

In this example, the div is doubled in size over 2 seconds on the hover state.


Enlarging a div element

View demo

The markup

The value of scale is added to the transform property, and a number is placed in brackets after this. If the number is set to 1, the element will stay the same size.If the number is increased, the element will become larger and if the number is reduced, the element will become smaller. I have set my value to 2 – this will double the size of the element.

View markup

CSS portion
div {
	transition: all 2s ease-in-out;
}

div:hover {
	transform: scale(2);
}
HTML portion
<div></div>

Shrink

Here, the div is halved in size on the hover state.


Shrinking a div element

View demo

The markup

In this example, I have set my value to 0.5 – this will halve the size of the element.

View markup

CSS portion
div {
	transition: all 2s ease-in-out;
}

div:hover {
	transform: scale(0.5);
}
HTML portion
<div></div>

I’ll be looking into 3D transformations in a future post…

Leave a Reply

Your email address will not be published. Required fields are marked *