Build a Kickbutt CSS-Only 3D Slideshow

Will Moyer on Jan 11th 2011 with 88 comments

Tutorial Details

Topic: HTML, CSS3
Difficulty: Moderate
Estimated Completion Time: 45 minutes

Final Product What You'll Be Creating

In this tutorial, I’m going to show you how to create a 3D slideshow using only HTML and CSS. No JavaScript required! Fire up Safari and let’s get started!

Theory

Before we dive into building our slideshow, it’s important to understand our approach. We’ll be using the new 3D transforms that are part of the CSS3 specification. You’ve probably seen other tutorials on how to use these transforms to build objects and animate them in a 3D space. Usually when creating a slideshow, we’d rely on JavaScript to trigger those transforms. JavaScript would detect a click event and update one of our HTML elements (typically by adding a class). The updated element would then receive new CSS styles.

What’s different about this tutorial is that we will bypass JavaScript by using only CSS to trigger click events and update our element’s styles. Jeffrey Way’s recent Quick Tip, Mimic a Click Event with CSS, describes a way of doing this using the :target pseudoclass. Here, we’ll use the :focus pseudoclass and the HTML5 element <figcaption>, but the idea is the same.

This method isn’t necessarily “better” than using JavaScript, but simply a neat alternative that takes advantages of the newest HTML5 elements.

Step 0: Getting Started

Let’s start by creating an index.html and style.css. We’ll also create an images folder.

Our 3D object will be a rectangular box with four 940px by 400px faces and two 400px by 400px faces. I’ve included six images in the source files. Place these, or your own versions, in the ‘images’ folder.

Step 1: The HTML

Below is our base HTML. We’ll be wrapping everything with a container and our slideshow, naturally, will be located within a div element called slideshow.

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>CSS 3D Slideshow</title>
	
	<link rel="stylesheet" type="text/css" href="style.css"/>
		
</head>

<body>
	<div id="container">
		<div id="slideshow">
		</div>
	</div>
</body>
</html>

Within slideshow add the following code for our six images:

<figure id="box">
<img src="images/face1.jpg"/>
<img src="images/face2.jpg"/>
<img src="images/face3.jpg"/>
<img src="images/face4.jpg"/>
<img src="images/face5.jpg"/>
<img src="images/face6.jpg"/>
</figure>

Note that our images (the six faces of our 3D object) are wrapped in a <figure> with the ID of box. This element is what we will rotate when animating our slideshow.

The Trick

Now comes the trick that allows us to use only CSS to detect click events. We will wrap box with six other <figure> elements. Each one will represent a different rotation of our 3D object. The attribute tabindex allows these elements to receive the pseudoclass :focus.

Each <figure> will also need a <figcaption> element inside of it. These captions will serve as our buttons. When clicked they will trigger the parent <figure> to receive :focus. That will allow us to use six different CSS transforms on box.

It might sound a bit complicated right now, but it’ll make sense once we get to the CSS. For now, just wrap box with six <figure> elements and give each a unique tabindex and ID. Then include a <figcaption> for every <figure>.

Final HTML

The final markup in index.html should look like this:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>CSS 3D Slideshow</title>
	
		<link rel="stylesheet" type="text/css" href="style.css"/>
		
</head>

<body>
	<div id="container">
		<div id="slideshow">
			<figure tabindex=1 id="fig1">
			<figcaption>Side 1</figcaption>				
			<figure tabindex=2 id="fig2">
			<figcaption>Side 2</figcaption>
			<figure tabindex=3 id="fig3">
			<figcaption>Side 3</figcaption>
			<figure tabindex=4 id="fig4">
			<figcaption>Side 4</figcaption>
			<figure tabindex=5 id="fig5">
			<figcaption>Side 5</figcaption>
			<figure tabindex=6 id="fig6">
			<figcaption>Side 6</figcaption>
				<figure id="box">
					<img src="images/face1.jpg"/>
					<img src="images/face2.jpg"/>
					<img src="images/face3.jpg"/>
					<img src="images/face4.jpg"/>
					<img src="images/face5.jpg"/>
					<img src="images/face6.jpg"/>
				</figure>
			</figure>
			</figure>
			</figure>
			</figure>
			</figure>
			</figure>
		</div> <!-- End Slideshow -->
	</div> <!-- End Container -->
</body>
</html>

Step 2: Basic CSS

First, let’s open up style.css and paste some reset code in, just for good measure. (Removing any outlines that :focus might cause is important.)

/* RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
:focus {
	outline: 0;
}
/* HTML5 tags */
header, section, footer,
aside, nav, article {
	display: block;
}

Next, we’ll give our page a nice gradient background:

html {
 width: 100%;
 height: 100%;
 background-color: #FFFFFF;
 background-image: -moz-linear-gradient(top, #FFFFFF, #b3b3b3); 
 background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FFFFFF),color-stop(1, #b3b3b3)); 
 filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFFFF', EndColorStr='#b3b3b3'); 
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFFFF', EndColorStr='#b3b3b3')";  
}

The background-image code includes the Mozilla and WebKit vender prefixes. In case you want a version of the slideshow to work with Internet Explorer, the filter and -ms-filter will create a gradient in IE6, 7 and 8. (I generated this code on the useful site www.css3please.com.)

Now, let’s add some code for our container, slideshow, and box:

#container {
 width: 960px;
 margin: 0 auto;
}

#slideshow {
 width: 900px;
 margin: 50px auto 0 auto;
 padding: 50px 0 0 0;
}

figure {
 display: inline;
}

#box {
 position: relative;
 display: block;
 width: 900px;
 height: 400px; 
}

Our container will have a width of 960px and be centered with margin: 0 auto. The slideshow div will be 900px wide, centered, and pushed down 50px from the top of the page. We’re also giving it 50px of padding at the top. This padding area will contain our slideshow buttons, the <figcaption> elements, once we position them.

The element which actually contains our slideshow, box, is set to the same size as our images. It’s also important to set position to relative as we’ll be absolutely positioning some of its children. Our other <figure>s are set to display: inline, but box must be a block element.

Now, set the following styles for our six images:

#box img {
 position: absolute;
 top: 0;
 left: 0;
}

We position our images absolutely so they will all stack directly on top of each other at the top left corner of box. (By default, top and left are set to 0. It’s been included for the sake of clarity.)

Right now, our slideshow looks like this:

Let’s add some styling for our <figcaption> buttons:

figcaption {
 display: inline-block;
 width: 70px;
 height: 35px;
 background: rgba(0,0,0,0.6);
 border: 1px solid rgba(0,0,0,0.7);
 -moz-border-radius: 20px;
 -webkit-border-radius: 20px;
 border-radius: 20px;
 text-align: center;
 line-height: 35px;
 color: #ffffff;
 text-shadow: 1px 1px 1px #000000;
 cursor: pointer;
 
 position: relative;
 top: -50px;
 left: 150px;
 margin: 0 30px 0 0;
 
 -moz-transition: all 0.1s linear;
 -o-transition: all 0.1s linear;
 -webkit-transition: all 0.1s linear;
 transition: all 0.1s linear;  
}

The first section of these styles is purely aesthetic. It makes the buttons semi-transparent and rounded and the text centered and shadowed. It also changes the mouse cursor to a pointer, so that users know they can click.

The second section positions our buttons above the images, centers them, and spaces them out.

Make sure you position the buttons outside the boundaries of the six <figure> elements. Otherwise, clicking on the button will actually register as a click on the innermost <figure> instead of the one corresponding to that button.

The last bit of code adds transitions. That’s because we’re about to add styling to the <figcaptions> hover state:

figcaption:hover {
 background: rgba(0,0,0,0.8); 
}

Our styled buttons should look like this:

Step 3: The 3D Box

The first thing we need to do is tell the browser we’ll be working in a 3D space. We do this by using the perspective property on a parent element. Let’s apply it (with the WebKit vender prefix) to slideshow:

#slideshow {
 width: 900px;
 margin: 50px auto 0 auto;
 padding: 50px 0 0 0;
 -webkit-perspective: 800; /* triggers a 3D space */
}

The value of perspective determines how many pixels the “viewer” is from the 3D object. The lower the value the more exaggerated the 3D effect.

We also need to preserve the 3D space throughout all our child elements. To do this we’ll add the property transform-style: preserve-3d to all our <figures>s. (Again, we’ll be using the WebKit vender prefix.)

figure {
 display: inline;
 -webkit-transform-style: preserve-3d; /* maintains 3D space */
}

Alright, now it’s time to transform the individual faces (our six images) to build a 3D box. We’ll target each image using the nth-child() pseudoclass, but giving each <img> a specific ID would also work. Make sure you add this code underneath the current styles in the stylesheet.

Here’s the code, I’ll explain it below:

#box img:nth-child(1) {
 -webkit-transform: rotateX(0deg) translateZ(200px);
}

#box img:nth-child(2) {
 -webkit-transform: rotateX(180deg) translateZ(200px);
}

#box img:nth-child(3) {
 -webkit-transform: rotateX(90deg) translateZ(200px);
}

#box img:nth-child(4) {
 -webkit-transform: rotateX(-90deg) translateZ(200px);
}

#box img:nth-child(5) {
 -webkit-transform: rotateY(-90deg) translateZ(200px);
}

#box img:nth-child(6) {
 -webkit-transform: rotateY(90deg) translateZ(700px);
}

Okay, so here is what’s going on: The first image is not rotated at all, but it is translated forward (toward the viewer) 200 pixels on its Z-axis.

The second image is rotated around its X-axis by 180 degrees so that it is facing away from the viewer. It is then pushed away from the viewer 200 pixels on its Z-axis.

Notice that the order of transformations matter — the rotation changes the object’s origin and then the translation occurs along a new axis.

Our third and fourth images are each rotated around the X-axis to face up and down, respectively. Then both are translated 200 pixels along their new Z-axes.

Remember, our box is 900px wide by 400px high by 400px deep. The four sides (the 940px by 400px faces) must be 400 pixels away from each other. That’s why we translate them all 200 pixels in opposite directions. The two ends (the 400px by 400px faces) we will translate 900 pixels away from each other.

The fifth and sixth images are currently on the left side of box and not centered. Because of this, our fifth and sixth images receive different translations. They both have their origin 200 pixels to the right of the left end of box. The fifth image must be rotated -90 degrees around the Y-axis to face left and then translated 200 pixels along its new Z-axis. This places it on the left end of our 3D object. The sixth image is rotated 90 degrees around the Y-axis to face right and then translated 700 pixels along its new Z-axis. This places it on the right end of our 3D object.

The best way to get a sense of what we’ve done is to look at the current arrangement of images. If you preview the slideshow in Safari you’ll currently see this:

Let’s hide the front face — just so we can see if our other images are positioned correctly:

#box img:nth-child(1) {
 -webkit-transform: rotateX(0deg) translateZ(200px);
 display: none; /* temporarily hide */
}

Now we can see the inside of our box:

Now, remove the display: none from our first image. You might have noticed that the box is bigger on the screen — closer to the viewer — than it should be. The front face especially looks overly large and stretched.

To correct for this we need to move the entire 3D object away from the viewer by 200 pixels. Add -webkit-transform: translateZ(-200px) to the styles for box. While we are at it we should also add the transition property:

#box {
 position: relative;
 display: block;
 width: 900px;
 height: 400px; 
 -webkit-transform: translateZ(-200px); /* Pushes 3D object back into place */
 -webkit-transition: -webkit-transform 1s;  /* Enables transitions for transforms */
}

With all that set, we are ready to animate our box.

Step 4: Animation

Paste in our final block of styling. This will add our animations. I’ll explain in more detail below.

#fig1:focus #box {
 -webkit-transform: translateZ(-200px) rotateY(0deg);
}

#fig2:focus #box {
 -webkit-transform: translateZ(-200px) rotateX(-180deg);
}

#fig3:focus #box {
 -webkit-transform: translateZ(-200px) rotateX(-90deg);
}

#fig4:focus #box {
 -webkit-transform: translateZ(-200px) rotateX(90deg);
}

#fig5:focus #box {
 -webkit-transform: translateZ(-450px) rotateY(90deg);
}

#fig6:focus #box {
 -webkit-transform: translateZ(-450px) rotateY(-90deg);
}

When each of our <figure> elements receives the pseudoclass :focus we rotate box to display the correct side. Notice that the box rotations are all the opposite of the rotations we used on each individual face. For example, the fourth image was rotated negative 90 degrees around the X-axis. To bring it into view we must rotate the entire 3D object positive 90 degrees around the X-axis. The translations ensure that the side of the 3D object we’re viewing is always the correct distance away.

That’s it! Check out the slideshow in Safari to make sure everything is working.

Final CSS

The final styling in style.css should look like this:

/* RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
:focus {
	outline: 0;
}
/* HTML5 tags */
header, section, footer,
aside, nav, article {
	display: block;
}

html {
 width: 100%;
 height: 100%;
 background-color: #FFFFFF;
 background-image: -moz-linear-gradient(top, #FFFFFF, #b3b3b3); 
 background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FFFFFF),color-stop(1, #b3b3b3)); 
 filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFFFF', EndColorStr='#b3b3b3'); 
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFFFF', EndColorStr='#b3b3b3')";  
}

#container {
 width: 960px;
 margin: 0 auto;
}

#slideshow {
 width: 900px;
 margin: 50px auto 0 auto;
 padding: 50px 0 0 0;
 -webkit-perspective: 800; /* triggers a 3D space */
}

figure {
 display: inline;
 -webkit-transform-style: preserve-3d; /* maintains 3D space */
}

#box {
 position: relative;
 display: block;
 width: 900px;
 height: 400px; 
 -webkit-transform: translateZ(-200px); /* Pushes 3D object back into place */
 -webkit-transition: -webkit-transform 1s;  /* Enables transitions for transforms */
}
 
#box img {
 position: absolute;
 top: 0;
 left: 0;
}

figcaption {
 display: inline-block;
 width: 70px;
 height: 35px;
 background: rgba(0,0,0,0.6);
 border: 1px solid rgba(0,0,0,0.7);
 -moz-border-radius: 20px;
 -webkit-border-radius: 20px;
 border-radius: 20px;
 text-align: center;
 line-height: 35px;
 color: #ffffff;
 text-shadow: 1px 1px 1px #000000;
 cursor: pointer;
 
 position: relative;
 top: -50px;
 left: 150px;
 margin: 0 30px 0 0;
 
 -moz-transition: all 0.1s linear;
 -o-transition: all 0.1s linear;
 -webkit-transition: all 0.1s linear;
 transition: all 0.1s linear;  
}
 
figcaption:hover {
 background: rgba(0,0,0,0.8); 
}

#box img:nth-child(1) {
 -webkit-transform: rotateX(0deg) translateZ(200px);
}

#box img:nth-child(2) {
 -webkit-transform: rotateX(180deg) translateZ(200px);
}

#box img:nth-child(3) {
 -webkit-transform: rotateX(90deg) translateZ(200px);
}

#box img:nth-child(4) {
 -webkit-transform: rotateX(-90deg) translateZ(200px);
}

#box img:nth-child(5) {
 -webkit-transform: rotateY(-90deg) translateZ(200px);
}

#box img:nth-child(6) {
 -webkit-transform: rotateY(90deg) translateZ(700px);
}

#fig1:focus #box {
 -webkit-transform: translateZ(-200px) rotateY(0deg);
}

#fig2:focus #box {
 -webkit-transform: translateZ(-200px) rotateX(-180deg);
}

#fig3:focus #box {
 -webkit-transform: translateZ(-200px) rotateX(-90deg);
}

#fig4:focus #box {
 -webkit-transform: translateZ(-200px) rotateX(90deg);
}

#fig5:focus #box {
 -webkit-transform: translateZ(-450px) rotateY(90deg);
}

#fig6:focus #box {
 -webkit-transform: translateZ(-450px) rotateY(-90deg);
}

Final Thoughts

There is probably no way to justify using a bunch of nested <figure>s and<figcaption> elements as buttons under the current CSS3 recommendations. Nor does this experiment respect the distinction of HTML for content, CSS for style, and JS for behavior. And since these transforms currently only work in Safari, this slideshow is by no means ready to actually be used in client projects. But the purpose of this experiment is to both showcase and push the limits of the new HTML5 and CSS3 features.

If you are interested in adapting this slideshow for browsers with less support, here are some helpful tips:

Use Modernizr. Seriously!
Only Safari supports the 3D transforms but you could create a nifty slideshow using 2D transforms and support a much wider range of browsers.
The opacity property would make a great fading slideshow and work in nearly every browser. (You’d need filter for IE).
The <figcaption> buttons will break in Firefox if they are absolutely positioned. It’s weird, I know. Just make sure you use relative positioning.

I hope you guys enjoyed this tutorial. I’m looking forward to your comments and thank you so much for reading!

Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By Will Moyer

Rollover to read this author's bio or click through to see a full list of posts by this author.

This author has yet to write their bio.

Plus Premium

Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more

http://www.fishmemory.net fractalbit
Hmmm, the demo seems to have problems? I tried it in chrome…

Jesse
From the article.
“Only Safari supports the 3D transforms but you could create a nifty slideshow using 2D transforms and support a much wider range of browsers.”
http://bibikova.com Ben Bibikov
One big piece is missing from this tutorial: at the very top a WARNING message should be placed about Mozilla is so 90′ for not supporting 3D

http://www.betleywhitehorne.com Richard Le Poidevin
Hello,
Firefox is getting support for true 3D, not just CSS transformations.
If you have a recent FF4 beta or nightly take a look at the WebGL goodness here: http://hacks.mozilla.org/2010/12/firefox4b8/
I think the Safari nightly has support too, and some of the WebGL effects people are doing in 2D make canvas look very laggy, no idea what possible techincally so I guess they must both have a use.

http://www.ifadey.com Fawad Hassan
Yeah that’s true. I tried in Firefox 4 and Maxthon 3 (Webkit based browser).
3d is supported :(

http://twitter.com/garbaczd David Garbacz
Demo didn’t work right in Chrome, Firefox, or Opera for me :\

http://bacaboomdesign.com Dilip Ramirez
C’mon guys, do you really read the tutorial? Even in the introduction text on frontpage it says “..Fire up Safari and let’s get started!”

http://JamieBroussard.com Jamie
Not the point, why bother trying to teach something that only works in Safari.
Usually people say, “Well, it works in IE, that is all that matters” Don’t reduce yourself to that level.
Don’t defend Safari in the same way. The point is, lots more stuff works in better browsers like Safari, Chrome, Firefox, and Opera. If you support Safari with something that only works in Safari, same as “What works in IE, is the way we should design to”. It is the same as designing to the lowest common denominator( IE ).
New, progressive, push the standard stuff, make sense, but there is a reason why it is called “Bleeding Edge”
http://www.willmoyer.com Will Moyer
Author
Sorry guys. I originally had a line like this at the top:
“Unfortunately, since only Safari currently supports CSS 3D transforms, our slideshow won’t work in other browsers. But many of the same principles still apply and could be used to create simpler versions — like a 2D slideshow — in browsers with less CSS3 support.”
I guess we should have made it more explicit.
But like Jeffrey said below, this is an advanced CSS3 tutorial, and therefore only Safari has enough support. Hopefully the other browsers will catch up soon!
http://cesazic.haipa.ro Stelian Andrei
You should also know that it doesn’t work on Safari 4.0.5 on Windows XP. I can see some transformations but aside from side “TWO” and TWO upside down and spining on some ocasions (Alt+Tab between windows repeats the last animation) there’s not much to see

http://thefree3dmodels.com silviu
It’s just me, or this doesn’t work!
(i’m using mozilla)

http://www.jeffrey-way.com Jeffrey Way
This is an advanced CSS tut — so you need to use Safari to see what will be possible.

Vlasnn
Hi Jeffrey, I’m agree with you about this is an advance Css tut, but that doesn’t have any relation about the browser with you or others are watching it, at the beggining of the tut is said, ” In this tutorial, I’m going to show you how to create a 3D slideshow using only HTML and CSS. No JavaScript required! Fire up Safari and let’s get started!” , then is build just for safari.
It is logical the confusion because is not too much emphazis on the safari cotation, to avoid it and not just complain I’ll sugest make bold the part were he is mention it.
I’m telling this because in the way that you said: “This is an advanced CSS tut — so you need to use Safari to see what will be possible.” sounds like safari is for advance and others no. I tried to see it on chrome and didn’t work and not i will download safari to see it.
Apart of that; was a good screencast in the magazine.net Thanks for it XD!!
http://JamieBroussard.com Jamie
C’mon Jeffrey, I have a hole bunch of respect for you, but this is a pipe dream. The proof is in the people who visit this site and the demo does not work. The proof is in the comments. So, this only works on Safari?
I love the fact that net.tuts pushes the envelope, but when you break the speed of sound, you might die.
I used to be a big Safari fan( about 10 min ago ). I still am a big Mac fan, but Chrome is king.
This is way out there, and very cool. But be careful in defending it. It tarnishes your reputation.
Still love ya though.
http://pixelcoder.co.uk Alistair
I was gonna regurgitate some of the Authors words and say how he mentioned about this not being real World at all and purely to push the boundaries of web standards and what we will expect from browsers in the not to distant future. Then you (Jamie) followed up with “this is a pipe dream”.
I whole heartedly agree, all this tutorial was to me was a topic of interest. Nothing that would really stick, it’s like saying a fortune tellers reading from a crystal ball is accurate.
By the time these things ever see the light of day cross browser, cross platform, within reason we’ll be all be too old to program.
I like to think i’m still young!
Would much prefer to see real World stuff here at Nettuts more often rather than stop gaps. If you have time to experiment with these things, you get paid too much! :)
# Fez
I just want to say here guys (especially Jamie) Jeff isn’t defending safari he is simply stating that it will work on Safari so far. =\

http://www.umbraprojekt.pl mingos
Works fine in Safari.
Does not work in Chrome, Firefox, Opera.
Internet Exploder is kinda obvious :D.

David Garbacz
Probably should have read ‘Safari 3D Transforms’

Juan Carlos Rois
@ first 3 readers.
It is only intended to work in safari, hence the -webkit- prefix for all the css declarations!

Juan Carlos Rois
I meant webkit on safari, sorry!

http://www.shaunbent.co.uk Shaun
Not 100% sure, so call me out if I am wrong but I saw a line in this article that says:
“Only Safari supports the 3D transforms”
I think this means that it only works in Safari, so why are the first 4 comments saying it doesn’t work in Chrome, Firefox or Opera?
Im just a little confused, have I got it wrong?
:P

http://jkandei.de jkandei
My thoughts exactly! And by the way it doesn’t work in ie6 and netscape neither! lol

http://www.shaunbent.co.uk Shaun
No Netscape?
Are you being serious? This is ridiculous, however dare they post a tutorial where the end result does not work in Netscape!
lol

http://www.madfrogdesigns.com/ Julesfrog
Under FINAL THOUGHTS: “Only Safari supports the 3D transforms but you could create a nifty slideshow using 2D transforms and support a much wider range of browsers.”

http://www.madfrogdesigns.com/ Julesfrog
Might want to move that line to the top ;)

http://www.ssiddharth.com Siddharth
The excerpt mentions Safari for a very specific reason :)

http://www.pudman.co Ryan
Don’t work mate.. not so kick ass after all??

http://www.pudman.co Ryan
It is nice when it works, just feel it a waste of time if it don’t even work in all the most up to date browsers!

http://www.derby-webdesign.co.uk Kevin
I’m sure it’s only an idea, in the future it could be useful when more browsers support it =)

http://www.freshclickmedia.com Shane
Reminds me of a Rostrum Camera (particularly Top of the Pops, circa 1987!)
Side
This is really amaizing thanks for this
Just6Lettes
Awesome…!!! but in Safari only… :(
http://kevinchevallier.com kevin
really interesting technique, just a shame that it only works with safari right now.
Thanks for this anyway!
http://2816monument.com Mark
Wow this is incedible. Obviously not for production but super crazy and amazing. Serious props to OP.
http://www.ronniesan.com RonnieSan
Demo doesn’t work in Chrome. This definitely isn’t ready to be released into the wild.

http://www.ssiddharth.com Siddharth
It’s because Chrome, currently, doesn’t support transitions. Check it out in Safari.

http://www.schultzstudio.com Chris
It might not work in all browsers but it’s a great taste of thing to come. Excellent tutorial!
http://taylorhutchison.com Taylor Hutchison
This is great! The transitions are so smooth.
http://jkandei.de jkandei
Great tutorial! Thank you very much! :)
vv
Demos doesn’t work in FF 3.6.
http://raxanpdi.com php/ajax
This is amazing! My only wish is that it would work in Chrome.
Boby
I found the bug, i working on Windows 98 and have problem in Internet Explorer 5.5, please fix it. The Buttons have no function :(

ralph
lol :)

Martin Ansty
Impressive tech demo, but it feels very hacky. I know it isn’t intended for production, but surely there are still better ways of accomplishing the interaction. Using :target and standard link elements perhaps?

http://www.willmoyer.com Will Moyer
Author
I think :target would make it look a little more wonky. Every time you clicked the browser would scroll to the link element.
The best way to avoid the hackiness is to just use JavaScript to detect the click events and update the classes. But it is fun to see how far we can go just using HTML and CSS!

http://www.unrealna.com poadcaust
POADCAUST!
Nice tutorial William! :))))))
Brad
Seems to me people are losing track of the fact that it wont be long before this does work in almost all browsers. A little education never hurt anyone. I surely dont mind learning it now. Thanks Will and Jeff.
BY THE WAY Jeff, some time ago you said there were problems with Filter_var. Could you maybe do a tut someday considering that fact as you see it? Even if it had to be added to another tut possibly on sanitation/validation efforts?
http://php.quicoto.com quicoto
It’s a really awesome Tut, BUT sucks it’s only for Safari :(
I’m looking forward the rest of browsers.
Good tut anyway ;)
Regards
Hans
Great tutorial!!
Everybody should just stop complaining about the fact that this only works in Safari. It is just a tut to show the power over css3 transforms and it is a great example of what you can achieve with modern technologies.
Yes, maybe it is not that practical at this particular moment in time, but we should always look forward and learn new things (even if they only work in whatever browser.)
This (and other) Tuts can teach you a whole lot about how CSS is going to work. Lots of css3 is already very usable and I’m using it on almost every project. But maybe most people are just looking for copy &paste solutions, so they don’t have to worry about learning it themselves.
Great Tutorial, thanks
http://www.idesignit.co.il/ Elron
Looks Awesome!!!
i cant wait till all the browsers will support 3D :)
http://www.guillaumevoisin.fr Guillaume
Amazing tut ! Seriously, the day these properties become standard, bye bye Flash ! Too bad it only works on Safari.
daverocks
It is a shame that it doesn’t work across more browsers but I think its a great example of what can be done.
I think it’s really good to get tutorials like this that show you just what is possible and that there are alternatives to other technologies. Soon it will be supported by all browsers so happy days.
Keep things like this coming.
Thanks.
http://blog.twostepmedia.co.uk Ben Howdle
Really really good tutorial, practically flash looking! I think people are taking this a bit too seriously, eventually all browsers will support these kind of amazing animations but until then, it’s more of a novelty!
http://www.eleqtriq.com dirk
Chrome will support it on both platforms soon. CSS3D transforms are already built into chromium. Grab it here: http://build.chromium.org/f/chromium/snapshots/
Tobias Jurga
too bad that safari is the only browser that supports this technology… can’t wait til all the browsers (… IE …) will support this – why? Much faster page loading than with flash, mobile browser friendly, easy to customize technology… love that
http://jayj.dk/ Jay
It WORKS in Chrome 10. You can download the beta here http://www.filehippo.com/download_google_chrome/

http://jayj.dk/ Jay
But you have it turn it on.
Go to “about:flags” and activate “GPU-accelerated composition”

http://webpresence.bg isHristov
Oh man, that’s just BEAUTIFUL (on safari). It really pleases the eye. So smooth… it’s awesome!
http://musastudios.com Juan Carlos
Awesome! nice tut!
Andrei Dinca
Why not canvas?
http://www.alexandraipate.com/themeforest/html5_rotating_cube/
HTML5 and javascript support.
http://www.iranhex.com IRANHEX
I cant see 3D slider in firefox!!!
http://www.kupsch.pl KUPSCH
Amazing effect! I didn’t know CSS3 is so powerful.
http://www.zachleat.com/ Zach Leatherman
Sure, 3D transforms might not work, but that’s no excuse not to make the slideshow at least presentable in older browsers. Fixed width/height per slide, add some margins around it, center the slide. Should be easy using modernizr. This should be part of the tutorial. As it stands, the tutorial is incomplete.
3D transforms are awesome though :)
eddie A.
That’s kewl. I had to update my Safari to 5.0.3 to see it. I thought it was broken too.
http://www.wordimpressed.com/ Devin Walker
Dang that’s some advanced CSS!

http://www.serprisedesign.co.uk Kevin
My thoughts exactly, really great effect. I’m not sure I’m that advanced with CSS yet tho =(

http://blog.twostepmedia.co.uk Ben Howdle
Just thought i’d point people to this post: http://blog.twostepmedia.co.uk/css3-still-novelty-or-usable-in-everyday-web-development/ for some interesting reading!
juanfe
Great! I almost got it working fine (in Safari of course), the first and last button aren´t working properly so I guess I typed some of the css properties wrong. The rest looks pretty cool.
Edward Longman
WOW simply amazing what css3 can do these days who cares that it only works in safari, its a message to the other browsers to get their asses off the ground.
I was fiddling aswell and thought you should all try this
just paste it at the bottom of style.css
#box {
-webkit-animation-duration: 30s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: box;
}
@-webkit-keyframes box {
0% {-webkit-transform: translateZ(-200px) rotateY(0deg); }
16% { -webkit-transform: translateZ(-450px) rotateY(-90deg);}
33% { -webkit-transform: translateZ(-200px) rotateX(90deg); }
50% { -webkit-transform: translateZ(-200px) rotateX(-90deg);}
66% { -webkit-transform: translateZ(-450px) rotateY(90deg); }
83% { -webkit-transform: translateZ(-200px) rotateX(-180deg); }
100% {-webkit-transform: translateZ(-200px) rotateY(0deg); }
}
authough the buttons now don’t work still prety cool.
Finally I was just wondering what fonts you used fot the pictures 2-5
particularly 2 and 3
thanks alot
Ed

http://www.willmoyer.com Will Moyer
Author
One is Mrs Eaves.
Two is Courier New.
Three is Chunk Five.
Four in Impact.
Five is Museo Slab.
Six is Futura.
I like your modifications!

Edward Longman
Thanks but do you perhaps know what the licences are and if I could use them

http://www.willmoyer.com Will Moyer
Author
Mrs Eaves and Futura you’ll have to buy and come with different usage licenses. (i.e. multi-use, single use, etc).
Chunk is an open source web font. Museo Slab 500 is a free font, but I don’t know the extent of the rights.
Courier New and Impact come standard with Windows, I’m not sure the exact usage rights.
Probably none of that was helpful, haha sorry.

Edward Longman
No thats grat thanks ill have to refer back to this

gordoenk
Who is using Safari? This kind of tutorials are senseless.
http://ohotgirl.com mr.Pham
Thanks Will Moyer . Very easy to understand
Kevin
With so many people assuming it’ll work it any modern browser (Chrome, Opera, Firefox) – myself included – There needs to be a clearer message stating it only works in Safari. People tend to scan read a web page – hence the majority missing a key point here.
Thanks for the tutorial though.
http://www.colddesign.it Giacomo Colddesign
Really great work..!!!!
satya
What the heck? it is not working in any browsers, pathetic!
satya
Not even the demo is working in safari, great work. Thanks for wasting my time.

Luke Crowe
The demo DOES work in Safari. Perhaps you are using an older version? The current release is 5.0.3.

Get Email Updates
Subscribe via RSS

Select a subscription type...
- Full Post RSS
- Summary RSS

advertise here

Become a Tuts+ Premium member to support this site and get access to more than 750 extra tutorials.

Full-time, Part-time and Contract Jobs

Freelance Jobs

More Freelance Jobs...

Build a Kickbutt CSS-Only 3D Slideshow

Tutorial Details

Final Product What You'll Be Creating

Theory

Step 0: Getting Started

Step 1: The HTML

The Trick

Final HTML

Step 2: Basic CSS

Step 3: The 3D Box

Step 4: Animation

Final CSS

Final Thoughts

Enjoyed this Post?

By Will Moyer

Hello!

Premium Members

Full-time, Part-time and Contract Jobs

Freelance Jobs

Build a Kickbutt CSS-Only 3D Slideshow

Tutorial Details

Final Product What You'll Be Creating

Theory

Step 0: Getting Started

Step 1: The HTML

The Trick

Final HTML

Step 2: Basic CSS

Step 3: The 3D Box

Step 4: Animation

Final CSS

Final Thoughts

Enjoyed this Post?

By Will Moyer

Hello!

Premium Members

Full-time, Part-time and Contract Jobs

Freelance Jobs

Follow Nettuts+ and Tuts+ on Twitter