So in the end we often find ourselves creating another version of a bitmap if we want to rotate it or need some more padding, feeling guilty because we know that this will cause more traffic and additional http-requests.

I have good news for you: there actually exists a ridiculously easy method to have all this additional attributes and it is supported in every modern browser. Funny enough I did not notice it out in the wild many times. The trick is: create an SVG and use it as wrapper for your bitmap. All the transformations we need can be applied to the image within the SVG. And if it's supported by the browser we can even use these sexy SVG filters. As SVGs are styled with CSS, we can link to the very same stylesheets we use to style our HTML - a convenient way to change attributes consistently across the document.

Using SVG sprites offers a lot of benefits over conventional sprites. Size is not a problem, as a larger SVG doesn't mean bigger file size. Plenty of room to place elements wherever you want them, no need to break your head about the most efficient way to position your tiles. And it is possible to use .jpeg, .png, .webm or .gif together in one sprite. It's even possible to create alpha channels for JPEGs by putting them into a clipping path.

Some Demos

Demos open in new window. Did I mention that KISS is the greatest Rockband EVA?

Caveats

Linking to an SVG which in return links to a bitmap means more http requests and as we all have learned, this is a BAD thing. Therefore we should encode bitmaps to base64 and embed them directly into the SVG. The SVG itself can be base64 encoded as well and embedded into the CSS.

Webkit is the only browser I know of that supports embedding utf8 into stylesheets, so there's no need for base64 encoding, we can paste the SVG code directly into the stylesheet (linebreaks aren't allowed of course ):

Using a CSS sprite helps to reduce requests even more. SVG gives us the option to define elements in one place...

...and reuse them across the document:

But this is the web and as you may already have guessed, things are never as rosy as it seems at first glance. There is a certain browser all of you know too well that still needs hacks and tricks to behave like all the other kids. No, I'm not talking of IE, this time Webkit is the black sheep. When embedded as background image, Webkit refuses to load xlink references in the SVG, so images won't show up and external CSS have no effect. This means it is unavoidable to use only inline stylesheets and base64 encoded images if you need proper Webkit support. But even when base64 encoded, there is a bug in webkit that prevents images from showing up in background SVGs. This is because Webkit needs to "see" the SVG at document level at least one time. If this isn't the case, only the vector elements within an SVGs will appear in a background but inline bitmaps will stay invisible.

There is a hack for that, but it's ugly and advocates of proper semantics will hate it: embed the SVG into the html first, i. e. as an 1x1px sized, invisible SVG object. If you don't like this method, javascript comes to the rescue:

You can remove the SVG object later when css have been loaded.

Recently I needed SVG sprite support in Webkit and created this little hack. It parses a stylesheet for references to SVG background images, then parses every found SVG for stylesheets and images. It then replaces references to stylesheets with inline declarations and images with base64 encoded versions. Finally it will embed the resulting SVGs into the document and remove them after 1 second. At the same time references in the css are replaced with utf8 encoded SVGs.

If you pass "true" as a parameter for "viewSourceMode" (default is "false") it will display the source of all the fixed SVGs in teaxtareas for convenient copying.

Be careful when using it though, it's in alpha state at the moment and speed is an issue when using large and/or many image files, but it can be very helpful during development and for testing.

Finally updated traqball.js, my little js lib for gimbal-lock-free 3d rotation to version 2.0. Most important improvements:

• Now its's possible to have multiple instances of trackball on one page.
• Comfortable configuration with a config object.
• Existing CSS transforms in a stylesheet will be preserved.
• It is possible to deactivate, reactivate and update a trackball.

Download from github and have fun!

Open Example

I got hooked on desktop-publishing the moment when I attached a text to a path for the first time in Freehand 3. It was magic. Suddenly you could create designs that used to take days or even weeks in less than an hour. If you take a look at late 80s/early 90s design, you will see how the new possibilities shaped the visual language of the time: twirlig, flying letters with zero gravity - from todays perspective its very much like the exaggerated stereo effects in records from the early sixties when music producers tried to show off all their new toys.

For some time now I have been breaking my head on how to create warped text in HTML. CSS3 has some handy transformations on board: rotate, skew, matrix, translate. Transform every glyph individually, bring it to the right position and you will get some nifty text following a path. Click on the picture below to see the proof of concept. All typography is pure HTML and CSS3, no Bitmap, flash or SVG in sight (fingers crossed the google font directory isn't down again right now).

Of course it isn't an option to do all this transformations manually, it would kick us back into the pre-DTP-era in terms of labor intensiveness. Therefore I took the challenge to build a tool for CSS text warping myself. Through my AS3 experiments I already had enough knowledge of bezier-math to find out the proper angles and positions. Unfortunately CSS3 doesn't offer us something like :nth-letter, so every letter must be wrapped into a new span for now, which is the recommended practice for in-word letter styling by the W3C. Anyway I'm not absolutely happy with this solution and am currently working on a Javascript to do the warping dynamically. I will post it here when I'm finished.

The tool allows you to attach any text to an arbitrary bezier path or a circle. Click "Generate HTML" to get a chunk of HTML that you can copy and paste into your existing website then. Try it out here.

The technology

CSSWarp is mainly HTML5 and Javascript with a slight dose of Flash (for font-detection). The HTML5 canvas is used for drawing the curves and circles. jQuery helps with DOM-manipulation. I added some spice with CSS3-animations for Webkit and Fox>3. The App has been successfully tested in Internet Explorer 9, older versions are not supported of course.

Use of fonts

Font warping isn't worth anything as long as you can't apply it to a wide array of fonts. As a consequence CSSWarp gives you access to the google font-directory and it is possible to use your local fonts (which admittedly can be tricky. See in-app documentation for more info). If you have flash installed, the app will show you a listing of the installed local typefaces. I would love to support web font services like Typekit, but right now I don't see how this should be possible without the support of the service providers. For now you're out of luck if you don't have a copy of your webfont installed locally on your machine. Don't forget to embed your fonts with @font-face declarations before you upload your HTML to the web.

I still have to test how good CSSWarp supports font replacement technologies. For sIFR I predict inconsistent behavior, because not every browser supports CSS transformations on swfs. I wouldn't recommend using sIFR anyway, as this will result in a Flash-Player instance for every single letter, not the worst method to melt your CPU. Cufon will most probably work, but as Cufon will create a bitmap *before* CSSWarp applys any transformation, expect bad kerning and a more or less blurry look.

Finally some words about file size. Every transform in the CSS for a warped text must be present in up to 4 flavours: -ms-, -o-, -moz- and-webkit-. One would expect that the CSS containing the sum of all these vendor prefixes would be unacceptably large, but still the stylesheet for the example above is only around 3Kb (gZipped) compared to around 30Kb (depending on loss) for the same graphic as jpeg. Seems we do have a clear winner here, but take into account that all the fonts in the graphic will sum up to some additional 200k. In the end it's a trade off: do you use your fonts only in one graphic or multiple times? Is crawlability and readability of text important for your site? If all these aspects have been taken into consideration, this method can help to enrich the visual experience of a website.

What's next?

Still a lot of work. First I will clean up code. It has gotten a little bit messy under the hood and I apologize in advance for every event-listener I forgot to unbind. Then I will integrate support for kerning tables. And then there are a lot more nice to haves: local storage, undo/redo relative units and last but not least dynamic text warping with Javascript.

Please take your time to play around with the app. I would be glad if you send me some feedback to help me improve it and of course bug reports are welcome:

Open Example

This is a little showcase I build yesterday. I had some "leftover" illlustrations from a recent project the client rejected, so I took this as an excuse to cobble together a little demo that uses all the fun CSS stuff: animations, transitions, transforms, 3D...

Open Example

These are cutting edge CSS-tricks. To be able to see it, you will need the latest Webkit- browser (if you are on a Windows-machine I recommend Safari/Win. The latest version of Chromium I tested, 66751, still has big problems with z-sorting and finding the right transform-origin):

• the latest Chromium for Windows
• Safari 5.0.2 for Windows, Mac or iOS

Nesting animations was fun (the tractor contains several nested animated block-elements). Z-sorting is still an issue with Webkit CSS3 3D transforms (sometimes you will see hidden elements shine through, though it seems as if the latest Safari-upgrade improved things somewhat - interestingly Safari/Win seems to behave better, Safari iOS behaves best), but in general I'm quite satisfied with the quality and smoothness of the animations. And with the help of trackball.js you are able to rotate the book freely and enjoy it from all sides.

I finally found some time to finish my short series of tutorials on CSS 3D transforms. If you haven't checked out part 1 & 2 I recommend you to do so, otherwise you will feel lost pretty soon.

In this tutorial we will learn how to build a 3D packshot in HTML and CSS by applying some CSS 3D-transforms. Then we will add some Javascript to make the object freely rotatable in 3d space. And as we will enhance our Javascript with some touch-interactivity, the packshot will also work nicely in Safari for iOS-platforms like iPhone or iPad. A warning: be prepared that the second part of this tutorial will be quite math-heavy.

...or direct your mobile-browser to www.eleqtriq.com/wp-content/static/demos/2010/rotation/ (sorry for the mobile-unfriendly URL).

The current State of CSS 3D

Since I published my first tutorial a few months ago, more and more sites showed up that actually use CSS3D transforms. But as we all have learned, support for CSS3D-transforms is still marginal outside the iOS world. So what is the use in learning this technique anyway?

• Chromium has already integrated experimental support or CSS 3D Transforms on Windows (this is great. Now my Windows-visitors are able to enjoy the demos too! If you are on a windows machine, download a copy of the latest Chromium and come back. Welcome on board, folks :) [Update: just found out that Safari 5.0.2 for Windows now supports CSS 3D as well. So Windows users do have more options than Mac-users :)] With Chromium and iOS we do not have a large user-base on the desktop, but we will have a real large chunk of the mobile market that will be able to see CSS 3D.
• Apples iAD-Platform will make heavy use of all the advanced Webkit CSS3-tricks. With a current iPhone-market share of 26% of the smartphone market (October 2010) demand for iAD development is expected to continually increase over the next few months. So if you are in the online marketing ad-creation business, CSS3D will be something you should keep in mind.

Enough said, let's start the tutorial:

1. Building the packshot with HTML and CSS:

To demonstrate CSS 3D on a real world-example we will create a virtual packshot for Spritebaker. We start with a basic HTML-"sceleton":

In order to style the content we will use a handful of conventional HTML and CSS-techniques, therefore I will not bore you with too much details, you are a gown-up web-developer, right? Some lame 2005 image-replacement and CSS-sprites to make everything fairly accessible and crawlable (as you know I'm a big proponent of Data-URI-Sprites, but I avoid them in my demos most of the time to keep source-code readable).

2. Applying the CSS 3D Transforms:

More fun to come: let's form a nice 3D-box by rotating and positioning every side. The CSS transforms are straightforward and easy to understand:

We add some spice by adding a webkit-box-reflect below and voila, ready is our box! Attentive readers will see that the reflection is erroneous, with the box-shape accurately reflected but not the typography on the box. This is a bug in webkit for MacOS. Applying a 3D-transform to an element causes that its content can't be reflected properly (strange to say this bug doesn't affect Safari for iOS).

3. Making the Box rotatable:

Figure 1: the Virtual trackball.

It's starting to get interesting: let's add some interactivity with Javascript so we are able to twist and turn the box with the mouse (side-note: we will avoid any Javascript-library like jQuery or Motools and code directly for Webkit instead, as its our sole target-browser. This way the script stays lean and small, <3kb gzipped without comments, mobile browsers will love you for that).

Some Words about Object-Rotation in 3D-Space:

Rotating and twisting objects in 3D-space might not sound like a big deal: just change the object's angle according to the mouse position on the screen, right? Unfortunately it's not that easy. The movement will feel unnatural and "bumpy" and we will have to deal with the problem of "Gimbal-Lock".

There exists a better technique for achieving a natural and smooth experience for the user. It's called the "Virtual Trackball". The Virtual Trackball is an imaginary sphere around our 3D-object. Every mouse-click on the screen will be mapped onto this virtual sphere and every dragging-operation will cause a rotation of the virtual trackball and the object inside, resulting in a smooth and intuitive rotation. Let's see how to build a virtual trackball for our box:

Mathematics of the Virtual Trackball:

How to construct the virtual trackball:

Figure 2: Mapping the coordinates of the mouse to the Virtual Trackball.

The center of the box and the Sphere must be at the center of the coordinate-system (y=0, y=0, z=0), which is also the center of the stage. The sole purpose of the virtual trackball is calculating angles in 3d-space. We are not interested in distances, it is enough to know their relation. Therefore we will put the sphere into an easy to calculate coordinate-system where its radius is simply "1". Mouse-coordinates on screen can be translated to this new coordinate system easily by dividing all values by the "untranslated" radius. Choosing the right radius is a matter of instinct. Choose a value that "feels right". I decided to make it half of the shortest side of the viewport. This maybe not o. k. in every situation though, you will always have to test and make your decision accordingly.

2. On mouse down, detect the mouse-coordinates and map them onto the trackball:

Figure 3: determining the rotation-axis from the vector at the moment of mousedown and the vector during rotation.

we translate screen-coordinates to trackball coordinates:

sphereX*2=mouseX/radius
sphereY*2=mouseY/radius

..and then move [0,0] to the center of the trackball coordinate-system:

x = x - 1;
y = y - 1;

We already know the radius of our sphere (it's 1, remember?) so it's quite easy to determine the z-coordinate of the translated point with the help of some good old trigonometry:

2*Z²=1-x²-y²

Now that we have everything in place, we can start building the rest of the logic. I will give an overview in pseudocode. One more remark: the script makes heavy use of 3d transformation-matrices and rotate3D, but avoids "rotateX, Y, Z". If we would use single-axis-rotations it would be necessary to calculate the rotation in quaternion-space to avoid gimbal-lock. If we use rotate3D or matrix3d, webkit will handle the quaternion stuff for us.

At first-run or at the moment the user releases the mouse (or lifts his hand) we create a new matrix3D from the last axis-vector and angle, store it in a variable and apply it to our box. When the user decides to click and rotate again, we will apply this startmatrix together with rotate3D to our box. This way we prevent our box from flipping back to it's initial, "unrotated" state on every mousedown/touchstart-event.

This is an overview of the actual logic. If you want to dig deeper, you should check out the Javascript, I gave my best to comment every step.

The script (I call it "traqball.js" by the way) is released under MIT- and GPL-license and you are alllowed to use it in your projects as long as you stick to the terms of license. Implementation is easy:

• Create some HTML-element (div, scection, article etc.) as viewport
• Apply some -webkit-perspective to it (values around 600 are o.k.)
• Pass the id of viewport over to the "init"-function along with an initial rotation-axis in vector-form ([a, b,c]) and an initial rotation-angle (in radians) and...
• ...place your rotation-"target" block-element inside the viewport. It must be the first block-child, then the script will find it.

Ok, we're through! Hope you enjoyed this little lesson. If you have used the script in your projects I would be more than glad if you send me a link.

Update updated traqball.js to version2.0. Source now is on Github. Read more here..

Sqetch is a little Illustrator-toolkit I built over time, consisting of several templates and elements:

• Browser
• iPad upright
• iPad landscape
• Smartphone
• GUI-Elements
• Form-Elements

It evolved one by one as an answer to several problems I encountered related to wireframing:

Like many designers I frequently experienced that clients did not understand my wireframes. More than once they were not able to distinguish between a layout and a wireframe. Suddenly I found myself debating about colors and font-sizes, when it would have been appropriate to talk about processes and information-architecture instead.

Presenting wireframes can be arduous. Sometimes you must go through countless screens with slight variations of one single situation. This requires a lot of discipline by the designer as well as the client.

Even experienced clients often react disappointed or bored to wireframes. Clients want us designers to "wow" them. Wireframes do a bad job at wowing anybody. Using Omnigraffle or keynote doesn't help either. Some clients do not understand the labour that is involved and think we are overpaid. I remember a client who actually told me he would prefer to do the wireframing himself, as he saw no reason to "pay a designer for pushing some boxes around in word".

As a consequence I began to create high-quality versions of my hand-drawn wireframes and use them in client-presentations. The hand-crafted, artistic component helped circumvent many of the problems described above. Unfortunately it came for a price: labour-intensiveness. Drawing a lot of variants of one screen is much more time-consuming than making changes in a digital document.

Therefore I began transferring my drawings to illustrator. And after some time a little wireframe-toolkit had evolved, which you can download here. For maximum flexibility everything was created with vectors, no bitmap in sight. Every element can be scaled without loss of quality, every single stroke can be edited separately, to adapt the look of a sketch as ever you like. Colors are in CMYK for easy printing. And if you are a CS5 user you will be pleased to find out that all symbols are attached to a 9-slice scaling grid.

The font in use is Nymph's Handwriting, a beautiful font from talented Lauren Thompson, which you can download from her blog. And as you are already there you should take a look at her other fonts, it's worth it.

Download of sqetch is free and you are allowed to use the toolkit in commercial projects. Anyway, should you use it on a website or in a printed publication I expect you to give me credit and link to www.eleqtriq.com (respectively mention the internet-address in printed publications). If this shouldn't be possible for some reason, contact me and we work something out. Happy wireframing!

Update! Thanks to Jakub and Smashingmag for linking. Anyway, as traffic increased over the last few hours I decided to test a mirror server. If you experience problems, please send me a note in the comments.

Over time Data URI Sprites have more and more become an indispensable tool for my work. For the rookies: data URI-sprites is the name of the method to encode all kind of binary resources to base64 and embed the resulting text-files into a HTML-document or a stylesheet. Unfortunately the process is somehow unelegant: first you must encode your binary-file with some adequate tool, then you will need to paste the resulting string into your css. As a base 64 encoded dataset can be some 100 lines of text easily, this process is quite error prone. Additionally most of this tools add linebreaks into the encoded text, but most browsers can't interpret data URI-Sprites with linebreaks which means you have to remove alle the linebreaks after encoding (and there can be a lot of them).

To make life easier for me I cobbled together a Flash-tool that does this job: feed a CSS-file to it and it will scan it for fonts, images and svg, encode them and return a new CSS-file.

All in all this works quite o.k. for me, as long as I stick to some rules: all URLs in quotes, no empty url() in attribute etc. But as the tool doesn't tolerate any errors and expects everything to be in place from the beginning, it would most propably drive a lot of other designers insane.

For some time now I had planned to convert the tool into an online-app. At first my intention was to refactor the actionscript and offer it as a downloadable Air-application. But then I got adventureous: would it be possible to get this done with pure HTML and Javascript? Javascript is not the best tool for processing binary-data, but an ajax-request together with overrideMimeType('text/plain; charset=x-user-defined') made it possible in the end,

You will find the fruits of my labour on www.spritebaker.com. You will also get some more Info about data-URIs and Gzip-compression. I hope the app is helpful for some of you. The whole thing was created on the google app-engine (which is a great tool, btw.). Have Fun!

This is the second part of a mini-series covering css 3d-transformations. If you missed the first part, you can read it here.

Suddenly they were here: with the increasing adoption of CSS3 in modern web-browsers a strange instument showed up in our toolbox, but nobody knew exactly how to use it: transformation-matrices. How could this mathematical object, obviously invented by some crazy geek with a bias for 90ies science-fiction movies happen to get lost in a CSS-proposal?

The good news first: even though "transformation-matrix" may be difficult to spell, it's less difficult to grasp the concept. Even better: If you don't want to, you don't need to understand it and still can use it anyway. But if you take your time to get the principle behind it you will have a really powerful method at your fingertips to manipulate DOM elements. Flash developers do have an advantage again, as they are already familiar with transformation matrices since flash 8.

Unfortunately there is not too much documentation on the web regarding transformation-matrices for mathematical illiterate folks like us designers. Therefore this little tutorial. Hopefully it is useful for some of you.

What are Matrices?

Matrices are like the warp engine in star-trek: space-time-continuum is changed from the outside, but the people in the star-craft don't notice anything.

Matrices are used for vector calculations (if you don't have any clue what this is, consult a math tutorial near you. At least you should be aware that the green arrows in the graphics on this page are vectors). Programmers do know that vectors and matrices are an important part of game programming. Why? Well, it is possible to alter an object with matrices and still keep its "inner" properties. Think of an airplane: we turn the airplane to the left. Now we want it to fly into the direction of its head, so we command "fly left". We have to do this every time the direction is altered: turn the plane first, then store the new direction and adjust the movement. This can quickly become a complicated task, i. e. if the airplane has to fly a complex path. Here matrices can be really helpful. It is enough to put the airplane into a matrix. From then on we simply tell the airplane to fly straight ahead and apply all the positioning, turning and twisting to the matrix.

Matrices do have some more advantages:

• Its possible to accomplish a lot of manipulations (turning, scaling, shearing, moving) at the same time. And as we have to add vendor specific prefixes for every transformation, it doesn't harm that we can "compress" them into one matrix. This will help keeping our code lean and saving CPU at the same time.
• It is quite easy to combine matrices by using low level math operations: addition, subtraction, multiplication.

How does it look?

A matrix is a sequence of numbers that usually will be stored within an array: i. e. [0.5, 4, 2.3, 1.5] is a simple cubic two-dimensional matrix. As this kind of syntax is difficult to read, it is common to list them line by line:

What's the meaning behind these numbers?

Let's think of a square on a piece of paper. Every point within the square has an x- and an y-coordinate. The first row in our Matrix represents the x-vector, the second one the y-vector. Each vector determines how this point will be transformed along the corresponding axis.

The matrix of an undistorted square must scale it along the x axis by the factor of 1 and along the y-axis by the factor of 1. This is called the "identity-matrix":

This matrix will narrow the square into half:

Now let's shear the square along the x-axis, similar to the "skew"-tool in Illustrator. We have to alter the y-value of the X-vector as well:

You can rotate objects with the matrix as well. In this case it is important to maintain a certain relation of every value in the matrix. Having an idea of trigonometry is beneficial:

"α” is the rotation-angle (important: in radian, not degree). Consult Wikipedia for the derivation.

Everything we have demonstrated until now for two dimensional matrices can be applied to three-dimensional space as well. In this case we need one more line for the z-axis and one more column for the z-values of the three vectors in our matrix.

We already learned that the vectors for the undistorted identity-matrix must have a value of "1" along their corresponding axes. Accordingly the identity-matrix for a 3d-transformation will look like this:

I prepared a little demo to play with the values (please use a browser that is capable of displaying 3d CSS transforms):

Wait — this is a 4 x 4 matrix. Wouldn't be a 3 x 3 matrix enough?

Until now we used simplified matrices. But usually a matrix will contain some more information besides the vector-coordinates:

The T-row will re-position the center of the transformation in pixels, allowing us to move the object.

The W-row is tricky. A perspective-projection is determined here. It is our viewpoint along the corresponding axis. Usually you will want this values to be zero except the last one. Play around with this values in the demo. If you're feeling adventurous, google for "homogenous coordinates" ;-).

Example: Coverflow in CSS

Let's test our knowledge with a little example: a picture-gallery in cover-flow style. I will not go into details but post the essential CSS here instead. Everything will work without javascript and additional graphical elements (except the images of course). This special result could be achieved with "rotate-y" as well but, hey, it's a demo, right? Use a CSS 3d capable browser for viewing. Everyone who doesn't have a Webkit nightly on mac, iDevice OS >2 or Safari Leopard can at least watch a video instead:

That's it. Where we usually would have needed some 50 lines of javascript-code, a few CSS-properties are enough right now. Isn't technical evolution a wonderful thing?

Bevel, Dropshadow, Gloss and Glow are designers chocolate-bar - everybody knows they should be avoided, but sometimes we can't resist. The biggest calorie-bomb is everything 3-D. Ahhh 3D - think of all the things it could make possible for us: palettes appearing out of the deep like spaceships, unfolding their menus like roboter-arms, then gliding majestically into the orbit...

Considered a curiosity for nerds by the most, right now a working draft for 3-dimensional transformation of css-elemets is proposed to the W3C and this draft is promising: open the example below to see what can be achieved with 4 divs (no further javascript necessary):

Anyway, before you launch your editor to build the ultimate startrekmatrixminorityreport-navigation you alway dreamt of since you pinned this millenium-falcon poster onto your wall at the age of 14: of course there's a catch. As it's only a draft right now, browser-support is still homeopathic. To be concrete: Safari on iPad, iPod-Touch and Leopard. But this could change soon: expect most webkit-based browsers to catch up one by one over the next time. Especially developers for mobile platforms will benefit from more options in their arsenal, so they should listen carefully. I'll try to give a short overview of the current state of CSS 3D-Transformations in this mini-series. This first part is mainly about the basic CSS 3D-properties. In the second part I will talk about transformation matrixes. And in the last part we will learn about higher mathematics (Quaternions anybody?) and natural object rotation.

My DIVs in 3D???

The purpose of CSS 3D transformations is to allow the designer the manipulation of DOM-Objects not only in the plane (x, y, top, left, right, bottom), but in 3-D space (z) as well. You may think of this as some gimmick without substance but, used properly, it can add value. CSS-3D Transformations can, especially when used in conjunction with CSS-Transitions, help to structure Interfaces into different sections and make the transition between this sections more comprehensible.

What's more: I prefer having a lot of tools in my box. If a utility helps to enrich a user-experience it is welcome. In particular I'm thankful for every instrument that supports me in budgeting the precious commodity screen-estate on mobile devices.

The Situation

To be able to see the examples you will need a browser that is able to understand CSS 3D-transformations. Currently this are:

• Safari on MacOSX 10.6
• Webkit Nightly Build on MacOSX <10.6
• Safari Mobile on iPad, iPod-Touch & iPhone

Unfortunately the current Nightly build of Webkit for Windows doesn't support CSS3D-Transformations. I can only recommend to check from time to time wether the functionality has changed.

As you can see, currently CSS 3D Transformations are of particular interest to developers who do HTML-apps for the iDevice-Platform.

Which Browsers will Support The Standard?

It's most likely other webkit-based browsers will be the first to catch up. Besides Apples Safari, Webkit is also the foundation for Google's Chrome. Webkit may be not very dominant on the desktop, but on smartphones it is the prevalent rendering-engine, although the difference between implementations can be substancial.

Step by Step Walkthrough:

Designers with a background in 3-D Animations should not have too high expectations: the standard doesn't know anything about light sources, cameras, or shaders. 3D-Navigation is very limited, as viewpoint-rotation is not possible. On the other hand: even designers who already have been involved into 3-D may find some of the concepts quite abstract and unintuitive (what are transformation-matrixes?) and the interaction of the 3D-Element and other elements on the page is not always feasible (how will floats behave? What are margins?).

Before we carry on, I recommend to play with this demo. You can manipulate the CSS-properties independently and watch the result in real-time. Hopefully this will give you a better understanding of the abstract subject.

A side note: we can learn something about the disappointing SVG-implementation in Safari in this example: all background-images are svg, so you should expect them to be razorsharp all the time. Unfortunately this isn't the case, as Safari only uses a cached bitmap for distortion.

So let's start with our html-document:

The next thing we want to do is to rotate, scale and reposition div#child. Before we can do this, we have to tell div#parent that its children now live in 3-D space (notice the vendor-specific prefix "-webkit-" prepended to all CSS-properties:

Both declarations set the stage. None of them will cause any changes to the appearance of "parent". The only thing we do here is determine how children of "container" will be rendered.

The concept behind perspective is not very intuitive. Imagine a pyramid between the viewer and the z-plane. "perspective" would be the distance between the top of the pyramid and the z-plane. "Perspective" can be compared to the field viewing angle of your camera. The higher "perspective", the steeper the pyramid, so the transformed objects size will be nearer to it's untransformed size. A rule of thumb: values from 700 to 1000 will be recognized as "normal" and are a good starting-point.

"perspective-origin" determines the coordinates for the perspective-centers x- and y- values. It is like positioning a camera: "perspective" is the field-viewing-angle, "perspective-origin the x- and y-coordinates of the camera. Here we do use a percent-value, but absolute (px, cm, in, em etc..) or other relative (left, top, right, bottom, center) units would be allowed as well.

After setting the stage, we will now transform the child-element:

• We want the origin of the transformation to be positioned at the center.
• We want the Element to be moved 50px along the x-, 40px along the y- and 80px along the z-axis.
• Afterward we will double its width and rotate it 45 degrees around its y-axis
• We want the children of the Element to live in the same 3D coordinate-space.

transform-origin:

This is the center for the transformation. Units allowed are the same as for "perspective". Values for "z" are allowed, but didn't have any effect in my experiments.

transform: ...

Here we will group all transformations:

• perspective(val)
• translate3d(x, y, z)
• scale3d(x, y, z)
• rotate3d(x, y, z, winkel)

transform: perspective(val)

A kind of short-version of "perspective:val". This time it is not applied to the container but directly to the child. In contradiction to "pespective" it will alter the appearance of the object, not its children. If the container does have a "perspective" declaration, both values will multiply.

transform: translate3d(x, y, z):

Moves the object along the corresponding axis.

transform: scale3d(x, y, z)

Will scale the object along the corresponding axis. A value of 1 will preserve the original value. A need for scaling along the z-axis seems unnecessary first, as DOM-Elements usually do not have any depth. Anyway situations are possible where a z-scaling can be reasonable, for example if you arrange a group of divs in cube-form. This group could indeed be scaled z-wise.

transform: rotate3d(x-vektor, y-vektor, z-vektor, angle)

A rotation around a vector-axis. First we will determine a vector by setting its x, y, and z values. Its important to know that not the values themselves are important, but the relation of the values: rotate3d(5, 6, 10, 45deg) will give the same effect as rotate3d(50, 60, 100, 45 deg). The 4th value determines the angle of the rotation. Degrees(deg) and radian(rad) are allowed as units for the angle. I. e. rotate3d(0, 1, 0, 90deg) will rotate he object 90 degrees around the y-axis.

-webkit-transform-style:

One more CSS-property that will have only an effect on its children. The 2 possible values are "preserve-3d" and "flat" with "preserve-3d" being default.

• "preserve-3d" will treat child elements as 3-D objects living in the same coordinate-space.
• "flat" will treat child-elements as texture that are mapped flat onto their parent.

There are some more transformations I didn't mention because I think they are fairly self-explaining:

• translateX(x)
• translateY(y)
• translateZ(z)
• rotateX(angle)
• rotateY(angle)
• rotateZ(angle)
• backface-visibility: visible | hidden

So there's only transformation-matrix matrix3d(…) left, which I will discuss in part 2 of this series.