New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Animating the image cube

From: CSS: Transitions and Transforms

Video: Animating the image cube

In the previous movie, creating an image cube, we set up the initial CSS rules necessary for transforming--there's that word again--two-dimensional pictures into a three-dimensional cube. In this movie we're going to add the necessary JavaScript and CSS3 rules to make it interactive. First, let's bring in our JavaScript helpers. In all there are three files we're going to link to. Let's start with Modernizer, the excellent library that makes it easy to detect the CSS browser support on the function by function basis.

Animating the image cube

In the previous movie, creating an image cube, we set up the initial CSS rules necessary for transforming--there's that word again--two-dimensional pictures into a three-dimensional cube. In this movie we're going to add the necessary JavaScript and CSS3 rules to make it interactive. First, let's bring in our JavaScript helpers. In all there are three files we're going to link to. Let's start with Modernizer, the excellent library that makes it easy to detect the CSS browser support on the function by function basis.

So right after the second link tag that links our CSS Transition file, we'll add in the script tag, set the type to text/javascript, and source will set to the _scripts folder, and within that, modernizr 2.5.3.min.js. Let's close out the script tag, and we'll go to our next line.

Next I'm going to link to a series of utilities, put together by David DeSandro whose Tutorial on 3D cubes was the basis for this implementation. Again, the script, type text/javascript, and the source. We will go again to my _scripts folder, and this time it's utils.js. One more to go, and the final one is the rotate.js file, also scripted by David DeSandro that handles the actual CSS class removal, and addition, when the thumbnail is clicked.

So we start it with the script, type, and again it's text/javascript, and we'll point to the same path which is our . ./_scripts/rotate-box.js. That's all of the JavaScript, I'm going to save the page. Let's turn to the remaining CSS rules. All that's left to do is to add the rules that govern the show classes.

Like show-front, show-top, and so forth. These classes are added to the parent container. In our case, that's the div with the ID of cube, whenever the corresponding thumbnail is clicked. Each class will contain the Transform properties to move the cube side to the front. Let's begin with the front face. So we'll enter in #cube.show-front. Make sure there's no space between cube and the .show-front.

As when we set up the front face for the cube, there's no rotation involved just that translation or movement along the Z axis, whereas previously, the value for the translateZ property was +136 pixels, because we're moving it back into position, we'll use -136 pixels. So let's start with our webkit-transform and the function translateZ of -136 pixels.

Okay, we can copy that line, paste it in three times and change the vendor prefixes as needed. Next, let's turn to the back. Here, and with the rest of the cube sides, we'll perform a rotation as well as a translation, and we'll keep the same values, but make them the inverse of what they were when we set up the cube. So if the values are positive, we'll make them negative, and if they're negative, positive.

And one more thing, if we rotated the cube first and then translate it, we need to do the inverse of that. Then we will need to translate it first so that it's in the proper position to rotate. All right, let's get started with, #cube.show-back. And our first transform property, -webkit-transform. Now let's enter in our translateZ property with a value of -136 pixels, and our other function, rotateX, and we're rotating this 180 degrees, put a semicolon, and this is ready to be copied and pasted, and then slightly modified.

Okay, let's move on. Let's follow the same pattern for the right and left side of the cube. I'll put in my selector for the show-right, starting with webkit-transform and the function translateZ, again, set to -136 pixels, and rotateY -90 degrees. We'll select, copy, and paste as we've done once or twice before.

And now I'm going to copy show-right, and let's paste it in and change it to show-left. The translateZ value we can keep at -136 pixels, but let's change our rotateY from -90 to +90. Finally, let's do the same thing, reversing the signs as it were for the top and bottom of our photo cube. You may face it a little bit faster and maybe a tad less monotonous.

Let's copy the show-right and show-left CSS rules, and then we'll paste them down below and change their names to show-top and show-bottom. The other thing we'll need to change in each of these rules is rotateY to rotateX. Let's save the page, and let's see if we're ready to rock or not. I'll refresh the page in my browser, and let's click through the thumbnails. Sweet! We got a real 3D cube spinning around interactively.

Obviously, this technique is somewhat limited, you can only show six thumbnails and images at a time, but you have to admit, it's a cool addition to get your designer's Toolbox.

Show transcript

This video is part of

Image for CSS: Transitions and Transforms
CSS: Transitions and Transforms

26 video lessons · 13909 viewers

Joseph Lowery
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.