Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196

Create 3D transform effects with CSS and HTML

The upsurge in CSS3 and HTML5 brings us features like the 3D transform

Create 3D transform effects with CSS and HTML

tools | tech | trends: A web editor, a WebKit-based browser, HTML, CSS3

expert: Sam Hampton-Smith
(This article originally appeared in Web Designer issue 179)

You can download the projects files by clicking here

Web designers have all these lovely new HTML5 tags to work with, and a whole raft of additional CSS properties to play with. The result is, or will be, a shift forward in what is possible using standard semantic and accessible markup. The limitations we’ve learnt to overcome are being swept away in a rush of exciting new possibilities.

One such innovation is the idea of CSS-based transformations, transitions and animations. The premise is simple – we assign and the browser interpolates between the existing state and the new state in response to an event. So, for example, when you rollover a button a transition might change the colour of the button from red to blue, but instead of flicking between the two, the browser will shift through purple to get there. There’s a stage beyond in the draft CSS3 specification, and it’s operational inside some browsers including Safari: 3D transformations. Here we’re going to create a 3D cube to hold our page content. Each face will contain information, and we’ll add buttons to move between them. The browser will handle the cube’s rotation, leaving us with an effect entirely rendered in HTML and CSS! The full code for the steps can be found in the project files.

01 Open the start document

We’ve created a standard page which you’ll find in the project files. In our page, named start.html, we’ve got a container <div>, a “viewport” <div> and three “faces”. We’ve already added some basic styles to our three faces to make each distinct. Note that each of our divs flows one after the other.

001 <div id=”container”>
 002     <div id=”cube”>
 003         <div class=”face” id=”face1”>…</div>
 004         <div class=”face” id=”face2”>…<div>
 005         <div>
 006 <div>

02 Set up the viewport
Almost all the work you’ll do will be in the style sheet, so open up screen.css (found in the styles folder). If you’re going to use 3D transitions in WebKit you should define your viewpoint on the scene. We’ll used our container div as the viewport, so find the existing CSS for #container and add the code to set up the perspective and perspective origin.

001 #container {
 002     position:    relative;
 003    width:        500px;
 004     margin:        0;