CSS3 offers a wealth of possibilities in terms of visual and interactive effects, even allowing you to create animated elements without the need for either Flash or JavaScript. In this tutorial we’ll go through the process of translating a page element using a CSS3 transform.
The translate function essentially moves an element by a specified distance along the X and Y axes. You do need to provide browser-specific code to create reliable transforms, but the technique is not particularly complex.
Create your Page
We want to start by creating a Web page with a simple element for demonstration. You can use the following HTML5 code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<div class="moves">
I move
</div>
</body>
</html>As you can see we have a page with a single element in it and an area for CSS code in the head section. The element has a class name for identification in CSS and a small amount of text, but you can put anything you want in yours.
Style the Element
So that we can see exactly where the element’s bounds are, let’s give it some basic styling properties in the CSS head section:
div.moves {
height: 200px;
width: 200px;
background:#0000FF;
color:#FFFFFF;
padding:10px;
}View your page in a browser at this point so that you can see the change when you apply the translate transformation.
Apply the Translate
Inside the same CSS block for your “div.moves” element, add the following code to translate the element by a specified amount:
transform:translate(200px, 100px);This is the generic version of the code, taking two parameters representing the amount of pixels to move the element along the X and Y axes. To cope with specific browsers, amend your code as follows:
/*General*/
transform:translate(200px, 100px);
/*Firefox*/
-moz-transform:translate(200px, 200px);
/*Microsoft Internet Explorer*/
-ms-transform:translate(200px, 100px);
/*Chrome, Safari*/
-webkit-transform:translate(200px, 100px);
/*Opera*/
-o-transform:translate(200px, 100px);The code for each browser type has a simple prefix in front of the transform keyword. View your page in the browser and you should see the element change position 200 pixels across and 100 pixels down the page (as long as your browser supports these CSS3 properties). The translate transform can be passed parameters indicating a specific length as in this example, but can also take negative numbers or percentage values representing the length. The following code moves the element up and left:
transform:translate(-200px, -100px);The following version uses percentage values:
transform:translate(20%, 10%);Axis-Specific Methods
If you only want to move your element along one axis, you can use translateX or translateY, as in the following examples:
/*only along x axis*/
transform:translateX(200px);
/*only along y axis*/
transform:translateY(100px);Make It Interactive
We’ve covered the basics of using the translate transform in CSS3, but the results are pretty boring at the moment. The beauty of being able to use these functions in CSS is that you will ultimately be able to create interactive animations in your pages using only HTML and CSS code. To demonstrate, alter your CSS as follows:
/*default properties*/
div.moves {
height: 200px;
width: 200px;
background:#0000FF;
color:#FFFFFF;
padding:10px;
}
/*on mouse hover*/
div.moves:hover {
/*General*/
transform:translate(200px,100px);
/*Firefox*/
-moz-transform:translate(200px,200px);
/*Microsoft Internet Explorer*/
-ms-transform:translate(200px,100px);
/*Chrome, Safari*/
-webkit-transform:translate(200px,100px);
/*Opera*/
-o-transform:translate(200px,100px);
}Now the translation does not occur until you hover your mouse over the element, because we have moved the translation code into a CSS hover section.
Animate It
We’ve made the translation interactive, so let’s go a step further and animate it using a CSS3 transition. Add the following to the “div.moves” CSS block:
/*general version*/
transition: all 5s;
/*browser specific versions*/
-moz-transition: all 5s;
-ms-transition: all 5s;
-webkit-transition: all 5s;
-o-transition: all 5s;You can optionally specify an easing property and a delay before the animation starts. Please note that your own browser may support some but not all of these CSS3 properties, particularly the transition effects – Opera and Chrome tend to be the most reliable in my experience.
Conclusion
It goes without saying that CSS3 properties are not yet reliable in terms of browser support. However, they do give an exciting glimpse into the future of Web development, in which the page markup itself will offer a far more engaging experience than ever before.
Check out this tutorial in action here:
http://www.developerdrive.com/demo/moving_elements/moving_web_page_elements.html
