Interaction ProTip #4: Nobody Expects 3D

Everyone has a name for them: the excellent Phil Hawksworth calls them "delighters", my friend Tom Knowles and I call them "showbiz coding." They are little bits of UI that do something unexpected and fun.

I'm going to jump to my favourite kind: 3D effects. They give your UI some depth and nobody expects those suckers. They also have the advantage of being GPU accelerated effects, provided all you do is scale, rotate and translate (or skew, if that's your bag).

Basic 3D #

The easiest way to give the impression of depth is through a combination of box-shadow, scale and transform:

The effect is pretty neat and pretty simple to code. The expanding shadow is what your eyes expect to see for an object moving away from a surface, and it also moves down a little bit, adding to the effect. Of course anything that moves nearer to you gets bigger, so there's a slight scaling up of the box itself.

Code-wise it looks like this:

.box {
transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);

box-shadow: 0 1px 1px rgba(0,0,0,0.3);
transform: translateY(0) scale(0.95, 0.95);
} {
box-shadow: 0 11px 18px rgba(0,0,0,0.2);
transform: translateY(-20px) scale(1, 1);

Neat huh? The only downer is that the use of box-shadow during the animation causes paints, so I can't wholeheartedly recommend it for use on mobile devices (sad face). For high performance animations you always want to limit yourself to compositor-friendly options, like I said at the start, where the GPU gives you a hand and you avoid layout and paint. Mind you, you could probably make a version similar to this with a scaling shadow element. Would be kinda nice.

Rotating to the side #

Another thing you can do is to bring elements from the side. Let's take a list of elements and spin them round into another list.

There's goes that offset stuff again, making it feel a bit more fluid. This is a little more challenging to do because you need to position the elements in 3D space using transforms and rotations, and no browser today has a good UI for debugging 3D. If it goes wrong you'll be a sobbing mess of a human being, with only your intuition and number hackery to guide you. I know, I spent way too long trying to get this demo to work. (I'm not bitter.)

In any case, I hope you agree that this is a little more showbiz than sliding items to the side.

Card flips #

I'd say this effect came into fashion with the iPhone and, to be honest, it's probably fallen out again. Still, in the right places it will add a bit of interest to your UI.

For this you will have to avoid things like box-shadow because, like the first effect, it causes paints (which kill performance on mobile). That said, if you're interested, I've made a separate version of this demo which does have the box-shadow on it, and it's really nice. On Desktop. Where's there is POWAH.

For something like this you'll have to craft out animation keyframes because you want to animate scales and rotations independently, but they're both controlled through the transform property. If you want some real lolz check out the CSS just for the animations. What with the vendor prefixes and all the keyframes you'll see it's a monster. So much so I actually wrote a hacky little script to create them all for me. You might want to too. I'm sure there are some good tools to do that automatically, but I've not found it. Tell me if you know!

Of course you can do all the transforms with JavaScript imperatively, but then the compositor misses out on the opportunity to optimize things.

Flip this! #

My friend Hakim has spent quite a lot of time over the past year experimenting with UI elements, and many of them have surprising twists to them:

If you're still in need of inspiration check out Effekt.css, a community effort to collate and collect high performance and showbiz CSS-based effects.