CSS 3D transforms create depth and visually interesting elements on your page using perspective. I use them on the Polypane website and whenever I see them in the wild they look fun and clever. Unfortunately I don’t see them being used a whole lot.
Maybe that’s because it’s not well known you can do proper 3D transforms, or if they’re difficult to “get right”, between understanding the coordinate system, whatever “perspective” means, and strange issues across browsers, but I wish people used them more.
So I collected some of the most interesting ones I could find, rewrote them so they only need a single div and made a list with a live example and the CSS side by side.
It’s hosted over on the Polypane website, here’s the direct link: Beautiful CSS 3D Transforms.
Some of the examples are interactive and each CSS example comes with a copy CSS button for easy copying. If you have suggestions for additions to the list let me know!
Hi, I'm Kilian. I make Polypane, the
browser for responsive web development and design. If you're reading this site, that's probably
interesting to you. Try it out!
Media queries are what make modern responsive design possible. With them you can set different styling based on things like a users screen size, device capabilities or user preferences. But how do they work, which ones are there and which ones should you use? For the Polypane blog I wrote the complete guide to media queries.…
My goal with Polypane is improving the workflow for developers and designers. The main focus is of course developing an excellent browser for developers and designers, but I’m also developing online tools that help out during development. Two of them online now are a CSS specificity calculator, and a color contrast checker. Both of them…
Last December I wrote an article in Dutch for the Fronteers blog on a fun bit of CSS I wrote that use 3D transforms to create a cool looking effect: Porky Pig coming out of those red rings announcing the end of a Looney Tunes cartoon. At the time, I was creating a resource of…