Moving Web Page Elements Using The CSS3 Translate Transform

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

SHARE THIS POST
  • Anonymous

    Neat, would love a demo tho

    • Anonymous

      Demo is live.

  • http://www.logoblog.org/logo-maker.php Free Logo Design

    Good to see this elements, Thanks for it share B-)

  • Ricardo

    ‘representing the amount of pixels’

    should read

    ‘representing the number of pixels’

  • http://seancois.me/ Sebastian C.

    Thanks for breaking down the usage of these CSS3 properties.

  • http://seancois.me/ Sebastian C.

    Thanks for breaking down the usage of these CSS3 properties.

  • http://seancois.me/ Sebastian C.

    Thanks for providing a link to a demo of this. I hadn’t known about Tinkerbin until now. Good site!

  • http://seancois.me/ Sebastian C.

    Thanks for providing a link to a demo of this. I hadn’t known about Tinkerbin until now. Good site!

  • Jake

    What if when we clicked or hover on the object we wanted it to stay in the next position

    • xray

      same question here..

  • Mizseo – PPC Management

    Does any one know by adding these animations to your site. Do they effect your page load speed. I have fallen in love with CSS animation just checking before i include too much in my site.

  • Làm Đẹp AZ – Depaz.vn

    great, thanks