3D wall effect using only javascript + CSS3

July 13th 2010

I recently wanted to test if I was able to give a 3D aspect to wall as a proof of concept, so I fired up textmate, started coding and ended up with this. I only used JavaScript and CSS(3). I also need to point out that this demo only work in Safari as I used a proprietary attribute “-webkit-perspective”.

First things first

Check out the following video to have an idea how it should look in your Safari browser. Check out the project page to test it out by yourself: http://no-margin-for-errors.com/demos/3d-wall/

You can also check out this other version, featuring more objects:  http://no-margin-for-errors.com/demos/3d-wall-products/

The basics

The way I laid down the HTML is fairly simple, I have a container and inside of it, I have an unordered list. The markup looks something like the following (tweaked for readability)


<div class="wall">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>

The CSS

The CSS is also quite simple. There’s one very important property that needs to be applied to the container in order to be able to have the 3D effect in Safari or else the wall would look flat as it does in the other browsers. That property is the “-webkit-perspective” property. You can read more about it on the official Apple Safari developer documentation. After that, all I need to do is to rotate the unordered list (ul) on the “y” axis depending on the direction the user is sliding. That’s done using the “-webkit-transform” property.

The JavaScript

If you take a look at the JavaScript, you’ll see that it’s fairly simple. The only really important thing you need to do is to calculate the amount of degrees you which to rotate the list depending on the velocity of the drag. All of the angles calculations are done in the “perspective” function.


function perspective(){
	clearInterval(wall_interval);

	// Set an interval for the anim.
	wall_interval = setInterval(function(){
		if(wall_direction == 0){ // User stopped dragging
			if(wall_angle > 0 || wall_angle < 0 ){ // Bring it to neutral state
 				wall_angle  = wall_angle/1.1;
 				$('ul').css('-webkit-transform','rotateY('+(wall_angle*-1)+'deg)');
 			}else{ // Once neutral, cancel the interval
 				clearInterval(wall_interval);
 			}
 		}else{
 			wall_target_angle = wall_speed * wall_max_angle / wall_max_speed; // Calculate the angle based on velocity
 			if(wall_direction > 0 && wall_angle > wall_target_angle) { // Give the angle depending on the scroll direction
				wall_angle--;
			}else if(wall_direction < 0 && wall_angle < wall_target_angle){
				wall_angle++;
			}
			$('ul').css('-webkit-transform','rotateY('+(wall_angle*-1)+'deg)'); // Apply it
		}
	},20);
}

Bottom line

The proof of concept worked! It can be done today, just not widely supported. I was also quite impressed at how fast I’ve been able to build it, the rough has been done in about 2 hours, the rest of the time was spent tweaking the animations/styling the page. I didn’t document the code (I did comment it tho), feel free to take it and re-use bits of it.

This project sparked an idea?

Feel free to buy me a beer, or a coffee, or candies, or a car!

15 Responses to “3D wall effect using only javascript + CSS3”


  1. […] This post was mentioned on Twitter by pL and others. pL said: RT @scaron: 3D wall effect using only JS + CSS3 http://bit.ly/d2qUWk […]

  2. Wow. Very nice effect.

    Does not have the 3d effect in Chromium though, even if it’s webkit based.
    We need this feature in Firefox!! 😀

  3. Stephane says:

    @Julien: From my understanding, it’s a feature Apple needed in order to be able to give the native app feel to their web apps so they just added it an prefixed it with webkit.

    It’s not part of any recommendation yet, would be cool to see the other follow on that one.

  4. […] This post was mentioned on Twitter by Emmanuel Beaufils, montrealhackers. montrealhackers said: 3D wall effect using only javascript + CSS3 http://bit.ly/9FdM5A […]

  5. Cedric Dugas says:

    weel in fact tehre is already a draft for css 3d at the w3c

    http://dev.w3.org/csswg/css3-3d-transforms/

  6. Stephane says:

    @Cédric: Sweet. I’m wondering if it’s Apple who pushed for it or them who followed.

  7. […] Check out the following video to have an idea how it should look in your Safari browser.Continue Story […]

  8. […] Caron created a pretty, pretty 3D effect using jQuery and a little bit of (safari only) CSS3 […]

  9. Hello 😉
    Your script is nice on safari! but not in another’s browser’s :S
    Why this doesn’t work in FF or Chrome?

    GG anyway!

    Best regards

  10. Stephane says:

    @The_Death_Raw: It’s because it’s the only browser supporting the webkit-perspective property needed for this effect.

    Maybe the others will follow, who knows.

  11. Patrick says:

    Just like to point out that it DOES work in google chrome and looks mighty fine. Damn proprietary code.

  12. Stephane says:

    @Patrick: It does slide, but you don’t have the 3d effect since chrome doesn’t support perspective.

  13. Francis says:

    Hi Stephane,

    Just to tell you that you saved my life with your tools; I took the challenge to fix a friend´s website without knowing anything about jquery and with prettyphoto the site is almost finished (I´ll post the site here once it is ready) the only problem I have experienced is when I try to embed a swf file to play a flv video that uses an XML file, I also tried to do it with jwplayer and I had success with the “inline method” but the video never played.

    I´ll really appreciate your advice or suggestions; you are doing an oustanding job and the world is lucky to have people like you sharing such amazing knowledge and creativity.

    Best,

    Francis

  14. Immigration Solicitors…

    […]we like to honor other sites on the web, even if they aren’t related to us, by linking to them. Below are some sites worth checking out[…]…

Leave a Reply