Those two articles inspired me to create yet another very cool 3d CSS demo, that I like to call an Animated CSS3 helix using 3d transforms.

Simply go to the demo page and be amazed! I'm pretty sure you never thought something like that would be possible using pure CSS. Take note this demo only works in Safari (latest version). For those viewers that don't have that browser, I've added a video below.

For those of you who start digging in the source code directly, I'm warning you: You'll probably find one of the strangest HTML/CSS you've seen. This is purely created, just to achieve the desired effect. Now let's take a look under the hood and see how it works!

Video

Here's a reference video, displaying the demo page in the latest version of Safari and showing full effect of this demo.

How cool is that! Now let's see how you can create something like this yourself.

The idea

Everything starts out with an idea. That idea is something you'll keep as a reference in your mind, in order to later check if you really created what you wanted to do. This was my idea:

Seems reasonable, right?

HTML

So, let's start with the basics: The HTML. This one is easy: We just need the 100 rows and the "Two sides" of the helix. This is what I came up with:

As you can see, I used an ordered list (ol), since it looked appropriate to me. Than, we create 100 rows (each one in a li). Each list item has two containing divisions (div): One for each side of the image. We'll reference that using CSS.

That's all we need, just a bunch of (empty) HTML containers that we'll reference with CSS. Let's take a look at that part.

CSS

Now we're going to dive into the more interesting parts of this demo. First, we'll need some basics to work with. I've stripped it down to the core of this effect, just to make it more clear. This part doesn't contain any information about the animation and I've added some comments to make some things clear.

Read the CSS above and (try to) understand what it means: It's pretty important to know/find out what all the CSS properties do and what the effect is. The :nth-child selector is used to target the first and second division in each list item, so we can create the two sides.

Now we'll need to fix the background position for each row, so we can create the full image again (by default, the background position is set to 0 0, which means the top left corner of the image). This isn't hard to fix.

Although the first line doesn't actually do anything (same as the default values), I just added them to make things more clear. And since we know each bar has a height of 5 pixels, we can slightly shift them up for each bar. Take note this counts for every division found in the list item, so both the front and the back sides are handled.

This is the point where we'll apply the animation. We'll rotate each row across the Y-axis for a full 180 degrees (a flip). Let's start with the first row.

When you hover the container, the animation called flip1 will get executed.

The flip1 animation shows that nothing is happening at 0%, but at 100%, it's transformed to be flipped.

The second part is when no hover takes place (initial load + when the user moves away the cursor again).

We flip the row back again, starting at 180deg and back to 0deg (starting position).

Keep in mind the time this animation will durate, is the one set in the -webkit-animation-duration above. When this code is applied to each row, it will work. But since all the rows would have the same animation, they would all just rotate and it would look like one image that would rotate. I wanted to add a delay for each row later on.

We can do that by just adding more empty keyframes. This way, it would wait for animating until the browser sees two keyframes that it can animate with each other. Here's an example of the 5th row.

This is about it: Do it for each row, add the backflip animation and you're all ready to create the helix animation!

Code generation

As you might see, we need to write loads and loads of CSS in order to achieve the full effect. Since I was pretty lazy, I wrote a small HTML and CSS generator in Java (although I'm a C# programmer, Java is pre-installed on a Mac).

I'm not going to dive into the code (some comments are added), but just wanted to share it with you to see that it isn't hard to write this CSS file.

So there you have it, a pretty nice looking 3d helix created using pure CSS3. What did you think of it? Do you see any improvements you want to make to the code? Feel free to share!

This technique also (kinda) works on iOS (iPad, iPhone etc.). Sadly, it doesn't detect the :hover, so it only shows the initial animation. A nice feauture to have, is when you rotate the device, the animation would play. Oh, and if you want a double helix (or more!), just change the deg180 to deg540 (extra 360 degrees). Have fun!

This (we)blog brings you information about (web)design, blogging tips, (programming) tutorials and much, much more. I can't describe Marcofolio.net in words: Just look around and be amazed. Many (new) visitors have a habit to stick around, just because of the variety of articles.

Have fun reading this blog and don't forget to subscribe to the feed to keep updated on the latest articles.