Valtira Blog

Thinking in the Third Dimension (CSS3)

by Sheldon Schwartz - 10 Feb 2011, 13:36:52

While working on a recent project I found that CSS3 packs more than just cool factor. It’s also a powerful new front-end tool that can potentially save a lot of rework, reduce development time, and help maintain project budgets.

I thought I would share a snippet and demo of some code that helped me out of a jam recently and got me thinking of CSS in a new way. The solution was fairly simple, but like any quest, getting to the solution was the hardest part!

A little backstory: A client requested help to make their video site “iOS compatible”. We were supposed to work with the current UI and get things to function just like the content available for desktops and browsers. There was lots to do – from UI tweaks to swapping out the Flash video player for HTML5 video. Tons of fun, and all-in-all pretty straightforward. Except for one detail found when testing.

Apparently there is a “challenge” in Safari for iOS where tabs, buttons, and links can become unusable when placed over a video element.

I tried everything with the content and video element. I slid, hid, moved, unmoved, positioned and repositioned things. Nothing worked. With javascript I could move and/or hide the video element without much problem but the video would lose its place or just not play properly.

As the available project hours started to dwindle, I realized there was one direction I was not trying to move, slide, or twist this video element in — and that I was confining myself within a 2D space. I thought, “What about 3D?”

My fix ended up being a simple CSS3 3D transformation to “hide” an existing video element from the browser’s view by turning it on the z-axis. The main guts of this fix ended up only being about 5 lines of CSS styling – and it works great! I also added a cool animation effect in the process.

There are probably many ways to solve this – but here is a little demo of a simple 3D Transformation of a video element. (Works in fresh versions of Safari, Chrome, and iOS Safari.)
DemoSource

Script for Buttons/Hiding

Style for video element

Front-end development typically happens in a flat, 2D browser space, but with CSS3 some amazing things can be done in the browser in mesmerizing 3D. This little snippet and demo is just the tip of the iceberg. I have gathered links to other info, demos, and documentation below.

Here are some great links related to this post:

More Information and documentation:

W3C: CSS Home
W3C: CSS 3D Transforms Module Level 3
Safari CSS Reference: CSS Property Functions > Visual Effects Transform Functions
Surfin’ Safari: 3D Transforms

Demos on the Web:

Safari Reference Library: Card Flip (download only)
24 Ways: An Introduction to CSS 3-D Transforms
Line 25: Super Cool CSS Flip Effect with Webkit Animation
CSS3 Playground: 3d Flip Cards
DemiNoodle: Create a Flip Effect by Using CSS3
Safari Tech Demos: Photo Transitions

As a front-end developer I enjoy all opportunities to work on iPad and iOS development. On Apple’s mobile platform we are able to explore and take direct advantage of the many new features available with HTML5 and CSS3 via the Safari/WebKit browser.

From a front-end developer’s standpoint it’s fun, challenging, and pretty cool.

My suggestion to all front-end developers is to go out there and get busy with it!

Comments? Suggestions? Feedback?