Coverflow using CSS 3D Transforms
May 24th, 2011 - by Scott Gale - Add Comment »As HTML5 and CSS3 technology grows, WebKit CSS 3D transforms are emerging and allowing web developers to do some great things within the browser. To exemplify this, I’ve put together a CSS coverflow demo that functions inside the browser using CSS 3D transformations, reflections, multiple background attachments, and touch events.
View the Demo (best in Chrome or Safari)
This works on the iPad and iPhone as well using gestures, swipe left to right or right to left to change the item. This example uses Paul Bakus’ code as a base and building it out with lots of new tech.
Here is the step by step on how I built it.
Step 1: Create Perspective
To build the CSS 3D transform you have to first find your wrapping div and add -webkit-perspective: 500px; to it. For this I used the “bd2″ class wrapper.
.coverflow .bd2 {
-webkit-perspective: 500px;
margin: 0;
height: 60%;
border: none;
overflow: hidden;
width: 100%;
position: relative;
}
The perspective gives the illusion of depth on the z axis.
Step 2: Apply the CSS 3D Transform
Then apply the CSS 3D transform rotation depending on the location of the image:
var webTransform = "rotateY("+(side === "right"? 55 : -55 )+"deg)";
When the transform is applied it uses the perspective to calculate how much movement is required. You can play with this by expanding and contracting the window to see how the browser deals with it. The perspective code is very important, your rotation won’t work without you defining it.
Step 3: Enhance the view with the reflection
To do the reflect was pretty simple. I used the -webkit-box-reflect with a transparent gradient so that it would fade the reflect out. Here is the code:
.coverflow .hproduct img {
-webkit-box-reflect:
below 0px
-webkit-gradient(linear, left top, left bottom,
from( transparent ), color-stop(0.5, transparent),
to( rgba(50,50,50,0.7) )
}
You also have to make sure that your containing div is tall enough to pick up the reflect. I placed some webkit specific code in there because for other browser’s it doesn’t need to be as tall.
@media screen and (-webkit-min-device-pixel-ratio:0) {
.hproducts .hproduct {
height:225px;
}
}
Note: All subsequent steps are extra enhancements to make the coverflow that much better.
Step 4: Allow for scaling
There are a few cool tricks I used to make this allow for scaling. By using multiple background attachments I was able to allow for the slider to scale as the window size changes. Here is the example:
.coverflow .slider {
position: absolute;
bottom: 5px;
left:0;
margin:0 10%;
width: 80%;
height: 19px;
background: url(files/scrollbar-left.png) no-repeat top left,
url(files/scrollbar-right.png) no-repeat top right,
url(files/scrollbar-center.png) repeat-x;
}
I also put a width of 100% on the containing div to allow for it to scale.
Step 5: Capturing the touch gestures
I attempted to use jswipe for this to no avail. So, my solution was to attach a couple events and code this without the help of a plugin. The key to this is 3 events: touchstart, touchmove, touchend. Here is how I utilized these:
document.ontouchend = function() {
//swipe left
if( self.swipeLeft && self.swipe ) {
self.moveTo(self.current-1);
$("div.slider").slider("moveTo", self.current, null, true);
//swipe right
} else if(self.swipe) {
self.moveTo(self.current+1);
$("div.slider").slider("moveTo", self.current, null, true);
}
}
document.ontouchmove = function(e){
//move only if you swipe across
if( Math.abs(e.touches[0].pageX - self.startX) > 150 ) {
if( (e.touches[0].pageX - self.startX) > 5 ) {
self.swipeLeft = true
} else {
self.swipeLeft = false;
}
self.swipe = true;
}
}
document.ontouchstart = function(e) {
self.startX = e.touches[0].pageX;
self.swipe = false;
}
Basically this detects the range of your swipe and if it is from left to right large than 150 pixels it moves the images accordingly. The ontouchend can be replaced with any function to perform the needed action. The W3C has recently posted a link for touch events here: http://www.w3.org/TR/touch-events/
Step 6: Deal with all the other browsers
Believe it or not, not every browser is equal, so to build out this I used the philosophy of progressive enhancement.
So here are some samples based on what features you have:
If you have no JavaScript, you get something similar to this:
Running IE7, you get something like this:
Running FF, you get something like this:
Step 7: Rejoice! You made it.
There are a number of great techniques used for this all rolled into one. CSS -webkit-box-reflect, CSS RotateY, multiple background attachments, touchstart, touchmove, touchend, and browser compatibility handling. These are exciting new additions to browser technology. Browsers are evolving to make our tasks as designers and developers easier. It’s an exciting time to be a web developer.
