A Simple CSS Transform

One of the more interesting things browsers are supporting now are 3D transformations - and using them you'll hit about 90% of your users. Are they incredibly useful...as useful as say calc or regex-style selectors? No. But I'm all about progressive enhancement, and reducing cognitive load and this can go a long way to that.

Since most of my experience is in working with the financial industry, I'm going to give you a real-world example of how you might use this nifty little feature, albeit simplified, while also explaining just how it can be done.

I'm going to construct a page that has a credit card entry form and also an image to explain show where to get the numbers. For this example, I'm only going to use two rather simplified images (shown here); however, the image of the card back will be flipped horizontally before being saved as a JPEG.

In a real-world use, I would likely use several images of the front, each highlighting a data point, e.g. account number, expiration date, and name, and tie each of those images to the focus pseudoclass for the appropriate field, but as this is only an example, I'm trying to simplify it here. Of course that also means that code listings are going to be somewhat incomplete.

HTML

<span class="help">?</span> ... <div class="card"></div>

CSS

.help {   background:#efefef;   border:1px solid #ddd;   border-radius:0.7em;   cursor:pointer;   display:inline-block;   font-weight:bold;   height:1.2em;   margin-right:2em;   text-align:center;   width:1.2em; } .help:hover + .card {   background-image:url("creditcardback.jpg");   -webkit-transform:rotateX(0deg) rotateY(180deg);   transform:rotateX(0deg) rotateY(180deg); } .card {   background:#fff url("creditcardfront.jpg") no-repeat center;   border-radius:5px;   border:1px solid #000;   clear:both;   float:none;   height:120px;   width:180px;   -webkit-transform:rotateX(0deg) rotateY(0deg);   transform:rotateX(0deg) rotateY(0deg);   -webkit-transform-style:preserve-3d;   transform-style:preserve-3d;   transition:transform 1s; }

Using the transform to rotate on the Y-axis (lines 15/16 and 27/28 in the CSS listing) flips the image on the horizontal axis in a one second animation (line 31 in the CSS listing). This in itself is not necessarily a useful trick, because the image is then backwards, but replacing the background image (line 14 in the CSS listing) while it's flipped gives the illusion that you're looking at the back of the same image.

Of course you can use a pseduoclass other than hover - focus comes to mind as one that may be useful. Also, your CSS may need to be more complex in order to get everything positioned just where you want...or you may need to tweak it in other ways, but this will give you the general idea of how to create a simple animation that's tied to a real-world implementation.

If you want to see how it works, or if it works in your browser, if you're using the 'desktop' site, just hover over the 'help' icon (?) in the example below and if you're using a mobile version, tap on the 'help' icon (?) in the example below. Moving the hover outside the help icon (or tapping outside the 'help' icon) will flip the card back over.

?