There are some amazingexamples of CSS transforms and transitions, and whilst you may be blown away by them, there's a good chance that you're also overwhelmed and a bit intimidated! This tutorial will take you back to the very basics. We're going to create some fundamental CSS3 transitional movements, step by step.
A Quick Note on Browser Support:
Support across browsers is already pretty reasonable. Firefox 3.5, Chrome, Opera 10.5, Safari 3.1, and Internet Explorer 9.0 have you covered where transforms are concerned. IE is a little less accommodating with regard to transitions, though support is planned for IE10.
The Axes and Grid
To help understand the movement easily we'll be working on an axis grid (which you'll probably recognize from basic math). We'll be using x and y coordinates to move our objects.
The only (crucial) difference is that on our axis the -y value is above the x axis, whilst it would ordinarily be below it. Why? Well, HTML and CSS (along with other web technologies like ActionScript) use an invertedCartesian coordinate system because web pages start from top-left and read downwards. So now you know :)
Note: I'm going to assume that you're already familiar with HTML and CSS file structure. I'm going to skip explaining how to set up the CSS file, placing images and styling the Axis. Our focus will be on animating the objects. If you're not confident that your HTML + CSS skills are up to scratch, take a look at the new Tuts+ Premium HTML & CSS in 30 days (which is free) and you’ll learn everything you need to know.
Advertisement
1. Horizontal Movement
The first movement we'll demonstrate is "horizontal"; we'll animate the object to move to the right and to the left.
Moving to the Right
To move an object from its initial position we use: transform: translate(x,y);, where the x value should be positive and the y value should be 0 to move the object to the right.
HTML
Open your favorite Text Editor and enter the following html markup, then save the file.
1
2
3
<divid="axis"class="one">
<imgclass="object van move-right"src="images/van-to-right.png"/>
</div>
We've assigned three classes to the image:
object: We use this class to set general rules for all the objects we will use.
van: We're going to use different objects to demonstrate each animation, so we'll apply different classes to them as well. This way we can position each object separately.
move-right: We'll move the object using this class, each movement will have different class.
CSS
Firstly, we'll position the object (our van image) to the center of the grid.
1
2
3
4
5
6
7
.object {
position: absolute;
}
.van {
top: 45%;
left: 44%;
}
In this example we are going to move the object 350px to the right. The syntax is transform: translate(350px,0); and the object will move when the Axis is hovered over. We therefore declare it with #axis:hover .move-right.
The CSS transform property will only move the object from one point to another, it will not animate between the two states. To do this we need to add a transition property in the .object class.
This transition rule will tell the browser to animate all properties attached to the object for 2 seconds using an ease-in-out timing function (tween), without delay.
To move an object to the left we simply need to enter a negative value in the x coordinate, while the y coordinate should remain 0. In this example we will move the object -350px to the left.
HTML
Create another HTML file and enter the following markup.
1
2
3
<divid="axis"class="two">
<imgclass="object van move-left"src="images/van-to-left.png"/>
</div>
This time we use the move-left class to set the css rule for moving the object to the left.
CSS
Then, we enter -350px as the x coordinate. transform: translate(-350px,0); to move the object to the left. Quite easy, right?
Moving an object vertically is pretty easy, almost identical to moving horizontally. The only difference is that we will use the -y value to move the object upward and the y value to move downward.
Moving Upwards
HTML
The HTML markup is identical to the previous two examples. However, we're replacing the object with a rocket (for illustrative purposes), and the class that we use for our upwards movement is move-up.
The method for moving an object downwards is (surprise, surprise) the opposite of moving upwards; the y coordinate value should be positive and the x coordinate should remain 0. The syntax is transform: translate(0,y);
HTML
In this example, we'll demonstrate downwards movement using a coin. Genius!
To create a diagonal transition, we'll combine values of both coordinates x and y. The syntax should be transform: translate(x,y). Depending on the direction, the value of x and y could be negative or positive.
HTML
And to demonstrate our diagonal movement, we'll use a paper plane.
We'll direct movement toward the north east. For the x coordinate value we enter a positive value (350px) and for the y coordinates we enter a negative value (-350px). The syntax will therefore look like this: transform: translate(350px,-350px);
1
2
3
4
5
6
7
#axis:hover .move-ne {
transform: translate(350px,-350px);
-webkit-transform: translate(350px,-350px);
-o-transform: translate(350px,-350px);
-moz-transform: translate(350px,-350px);
}
Feel free to experiment and direct the movement of objects along the other diagonal axes.
Rotational movement in CSS3 is regulated using a radial coordinate from 0° to 360°. To rotate an object simply apply the following css property: transform: rotate(ndeg); where n is the degree of rotation.
360° Clockwise
To rotate an object clockwise, we enter a positive value for the rotate(ndeg) property.
HTML
For this example we'll use a pencil to demonstrate the movement.
Scale is an interesting feature in CSS3. By using the scale(n) or scale(x,y) property we can enlarge or shrink an object within our HTML. The object will be scaled according to n/x,y value, where the x-axis is for the width and the y-axis represents the height. For example, if we enter scale(2), the object will be scaled twice (200% larger) along both axes, from its initial dimension.
Let’s take a look at the example below.
In this example we'll increase the size of the car by 200%, giving the illusion that the car is moving closer (hopefully).
HTML
Again, the HTML markup has barely changed, but this time we use a car as the object.
1
2
3
<divid="axis"class="eight">
<imgclass="object car larger"src="images/car.png"/>
The plan is to move the boomerang diagonally, while performing rotations at the same time. In order to do this, we simply have to list the transformations, separated by spaces.
These are basic examples, and there's huge scope for developing them further! Remember: take browser support into account when using CSS3 properties, and don't go crazy with these effects - they should enhance your design, not drown it!
