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.
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.
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.
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.
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.
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.
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.
View demo
The markup
The value of rotate
is added to the transform
property, and a degree value is placed in brackets after this.
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.
View demo
The markup
To rotate the element in the opposite direction, the degree value in the brackets needs to be a minus number.
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.
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.
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.
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.
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.
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.
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.
View demo
The markup
In this example I entered values for both the X and Y values, so the element skews in both directions.
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.
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.
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.
View demo
The markup
In this example, I have set my value to 0.5 – this will halve the size of the element.
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…