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!
[…] 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 […]
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!! 😀
@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.
[…] This post was mentioned on Twitter by Emmanuel Beaufils, montrealhackers. montrealhackers said: 3D wall effect using only javascript + CSS3 http://bit.ly/9FdM5A […]
weel in fact tehre is already a draft for css 3d at the w3c
http://dev.w3.org/csswg/css3-3d-transforms/
@Cédric: Sweet. I’m wondering if it’s Apple who pushed for it or them who followed.
[…] Check out the following video to have an idea how it should look in your Safari browser.Continue Story […]
[…] Caron created a pretty, pretty 3D effect using jQuery and a little bit of (safari only) CSS3 […]
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
@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.
Just like to point out that it DOES work in google chrome and looks mighty fine. Damn proprietary code.
@Patrick: It does slide, but you don’t have the 3d effect since chrome doesn’t support perspective.
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
Thankyou
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[…]…
In my opinion, it will be great idea to read https://writemypaper4me.org/blog/great-narrative-essay-topics before writing narrative essay. This information will help you to understand what do you want to write about
This is the mind blowing games website if you are lover of the online games to try this website games and share our freinds free online gin rummy thus is the mind blowing time pass if you are agree to connect the website and read the content of the website.
To play the amazing run 3 game, the players have to run and jump to pass different levels of obstacles. People remember this game as a game everyone plays at school. Good luck and have fun guys!
A fantastic 3D racing game to play with your friends.
https://adostuntcars2.io/
Thank you for sharing this wonderful data with us. Very valuable article. Really add value the way you described everything in this article. Keep up the good work
fnaf world
The DOM tree is generated via JavaScript every time you visit the page so … CSS3 scroll effects 3D · CSS3 scroll effects 3D · Rolling Links with 3D. the 3D roll! You’ll only be able to see the new style if your browser supports CSS 3D … CSS3 3D transforms are used to distort HTML elements and create the walls of the box.
Thanks-a-mundo for the blog post.Really looking forward to read more. Want more.
You are lover of the online games to try this website games and share our freinds free online gin rummy thus is the mind blowing time pass if you are agree to connect the website and read the content of the website.
When you see yourself as perfect and no longer with great goals, it means your life is losing a lot of meaning. run 3
The software and web developer need to know how the command could be created! There are many people including students want to get proper commend for programming codes!
I hope to see more from you, thank you for the nice article. It’s very intersting.
So, once you get to have a chat with your writer, ask them to send you a sample of their previously completed orders. In that way, you will know that you buy cheap essays online from an experienced assistant.
Your post content is being interested by a lot of people, I am very impressed with your post. I hope to receive more good articles t rex game
It’s a great piece of information, when I search for it, I don’t know how to use it
run 3
nice post
Java course in pune
waiting for more good articles, I have read a lot about it and know how difficult it is.