News

Create clever CSS3 and JavaScript hover effects

Turn a pack of cards into a rotating 3D object with user interaction using the key web technology CSS3

CSS3hover

inspiration:  www.diadobaralho.com.br

The O Dia Do Baralho website is dedicated to the humble deck of cards, and the illustrative nature of the design emphasises this with a series of card-inspired motifs and references used throughout. It’s the clever user interaction and animation that makes this site memorable. It boasts a slew of animations that bring the design to life, making the site a constant source of visual interest to the visitor.

As the user scrolls down the page, a sleeved hand thrusts a royal flush toward the header, while a table with players spins beneath a 3D pack of cards that ejects its contents. The pack responds to the user’s mouse, rotating in 3D.

Ultimately this site is designed to point readers toward the Copag online shop. Still, by focusing on the user experience the designers have created an impressive layout that’s both simple and engaging, demonstrating that good design coupled with clever animation really works.

DOWNLOAD TUTORIAL FILES

TECHNIQUE

Create your HTML

The HTML required for this project is really quite simple: start by creating a container <div> with an ID of ‘box’. Then, nest these five <div> tags inside, giving each a class from the ‘back’, ‘left’, ‘right’, ‘bottom’ or ‘front’. Place the ‘front’ <div> last in the source code – this should help to prevent any issues that could develop later on in the code.

Add some style

For each <div> you will need to rotate and translate the element to form a box. Check out our example code on the resource disc for the proportions and rotation values we’ve assigned to each. We’ve designed our box to be 300px tall, 200px wide and 50px deep. Remember to add the preserve-3d property to the #box container.

Add some script

Now you’ve got a 3D object – but you can’t see that it’s 3D until you allow it to move. This is easy to achieve with a little jQuery code. Add jQuery to your page, then create a function that listens for the mouse moving over the window. Grab the location of the mouse, and use this to calculate the degree of rotation you’d like to apply to the box.

Add your cards

Now you’ve got a moveable 3D box, add your cards by nesting a few additional <div> tags inside the #box <div>. Use similar calculations to animate the cards in response to the mouse position. At this point, you can jump into your favourite image editor and start generating your artwork.

Add the faces

Now simply apply your artwork to each face in turn using background images to complete the effect. Once you’ve completed a new graphic for each face and card, apply it to your CSS. If you’ve got any areas that need to remain transparent save as PNG, otherwise stick with JPEG for the smallest file sizes.

Test and tweak

Once you’ve got the basic interaction working, tweak the effect to suit your preferences. You can alter the amount of rotation by reducing the last constant in the calculated rotation for each axis, and reverse the rotation by multiplying by -1 – or removing this multiplication as appropriate.

×