Inspiration

Inspiration

Tag Archives: css transforms

Aug200827

9

3D CSS Transforms on the iPhone

So I wasn’t content with the things I’ve tried doing in Safari, and recently began digging through the documentation of the iPhone SDK and the actual CSS Transforms spec.

I was a bit skeptical when I first read about all the cool functions that work in Webkit iPhone, but nowhere else, because there was little documentation, and literally nothing done by other developers, no demos, no tests. I thought, surely, some students with too much free time must have jumped on that immediately?

Well, I decided to give it a go, and started Dashcode, created a new web application and hacked in some CSS Transforms into my elements. One very important discovery I’ve made is that only 2D CSS Transforms are directly visible on the WYSIWYG canvas in Dashcode. So when you think the actual 3D functions won’t work, run the iPhone simulator.

The iPhone simulator is actually capable of using the exact same API than the iPhone. This is awesome and a bit funny, since I always thought the 3D functions don’t work in the browser version of Safari yet, because they need to be bundled tightly to the hardware, but apparently, there must be a different reason.

The function that sounded the most awesome, I thought, was the -webkit-perspective function (“This matrix maps a viewing cube onto a pyramid whose base is infinitely far away from the viewer and whose peak represents the viewer’s position”, that just HAS to be awesome). The frustration came directly afterwards: The function did nothing.

At least, that is what I thought at first – the function does indeed nothing visually, if you don’t use any other transform functions. I believe this fact is nowhere written in the SDK docs, and it was hard to find out.

Here comes the cool stuff: The perspective function seems to define how the other primitive functions behave.

Let’s have a look at a practical example: Take a look at the following three functions:

  • rotateX – Rotates the element on the X axis.
  • rotateY – Rotates the element on the Y axis.
  • rotateZ – Rotates the element on the Z axis (By default, same as “rotate”)

Try these out – all three will give you flat, 2d animations, although they are, in fact, functions that use a 3D matrix. However, now change the -webkit-perspective property to 200, and try again. Now, you established virtual depth, and all three functions will give you incredible results.

To demonstrate it, here’s a demo that you have to either look at on your iPhone or in the iPhone Simulator:

As an extra flavor, this demo also uses the -webkit-backface-visibility property set to ‘hidden

‘, to hide the actual back side of the first element when the second element comes in (otherwise, you’d see the front flipped). Also, it’s lightning fast, even on the iPhone, since it uses Webkit’s native CSS Transitions, and triggers them via setting the webkitTransform css property.

Expect more to come soon!

Cheers,
Paul

Aug200819

5

CSS Transforms for Firefox

After my first teaser image, quite a few wondered why I’d bring out a version featuring CSS Transforms for Internet Explorer out instead. The reason why I now completely discontinued the CSS Transforms work for Firefox is that CSS Transforms are being shipped most likely along with the 3.1 release.

However, I think the two approaches were still interesting, so I’m discussing them with you:

The Canvas approach

This was my initial attempt to bring CSS Transforms to Firefox. Since there was no hack like using the Matrix Filter in IE, I had to do it the hard way. I knew that rendering web content to into a canvas was already supported by Firefox long ago but was then taken out due to security issues. So I had to take the long road and actually build my own limited rendering engine in Canvas (as some pointed out, of course not featuring things like inputs, buttons, everything natively styled by the OS).

Here’s how the logical implementation looked like:

  1. Find all instances of -webkit-transform
  2. For every found element:
  3. Create a new <canvas> element at the exact same position as the original, with the same constrains
  4. Rotate/modify/translate the whole canvas by the values found in the transform functions
  5. Literally draw borders, background and text (using FF3′s new text API for canvas) for the original item into the canvas and for all sub items
  6. Recompute the new constrains of the element and reset the constrains of the canvas

Although insanely difficult, it was working better than I initially thought, and I was able to create a DIV element with all kinds of sub nodes and rotate it with full speed in a nice animation.

The SVG approach

That’s when I found out about the foreignObject in SVG – since I never really played with SVG, it was completely new to me. The foreignObject basically is able to display namespaced XML, including HTML in an SVG canvas.

The fun thing here is that I immediately sensed that it was much more promising, because the CSS Transforms API is almost exactly copied from the SVG API, and if I could get the initial work done, I thought to myself, mapping it would be fairly easy.

Then I found about the limitations about SVG. For example, that it’s not possible to include inline SVG into an HTML page without serving the Content-Type as XHTML. Okay, this was a show blocker for my plugin, because I couldn’t possibly force people to use XHTML whenever they wanted to use CSS Transforms..

However, I did actually find a way to display inline SVG in HTML after many hours of research, and this is the implementation I came up with:

  1. Find all instances of -webkit-transform
  2. For each element,
  3. Serialize the whole node (outerHML) into a string (without positioning data in the style attribute)
  4. Wrap it with a prepared SVG XML Header
  5. Also insert the transform value as <g transform=’..’>
  6. Encode the whole string to base64
  7. Create a new embed element with the base64 String as data source, and render it to the page (with the position data from the original node on the actual <embed>)

If I would have continued with the development of the plugin, than definitely using the SVG approach. It’s pretty slow to do transformations on a foreignObject in Firefox 3, but you don’t loose the OS styles, and it’s so much easier since you don’t have to port over the CSS Transform API to something different.

See you soon with more exciting projects!

Aug200816

21

Bringing CSS Transforms to Internet Explorer

Extending the teaser

So I hope I got you a bit excited with my little teaser, and yes, the second tab was opened on purpose to give you a hint. Indeed, I was talking about CSS transforms, and yes, I was talking about somehow successfully porting them to Firefox.

I won’t go into details of my implemention of it yet, but I can assure you it isn’t using any additional plugins. Anyway, during my CSS transformation research for possible other browser implementations, I came up with something entirely different, and it was completely unexpected to me. As it turns out, Internet Explorer already supports CSS transformations in some way for years!

I was telling myself that surely, this wouldn’t actually work, since the Matrix Filter would allow you to actually rotate, scale and do whatever you want with elements, in IE, natively. And then, someone must have figured before me, years ago. But it turns out that the Matrix filter isn’t that popular at all (yes, these are filters that we hated so much back in time, and I feel totally stupid doing so now), so I decided to give it a go and played around with it.

Transformie!

What I came up with, is my new jQuery plugin (though fairly easy to convert to other libs) “Transformie“, a javascript plugin that comes in less than 5k that you embed into web pages and that maps the native IE Filter API to CSS transitions as proposed by Webkit.

Transformie supports the following functions from Webkit’s syntax (in degrees, radians or grads):

  • rotate
  • scale, scaleX, scaleY
  • skew, skewX, skewY
  • matrix (with the exception of the last two modifiers, tx and ty)

The reason the translate functions are not yet supported is the fact that IE’s Matrix function is not as flexible as Webkit’s, since you’re not able to specify tx and ty, the third columns’ first row value and second row value in the actual matrix (there is a way, but then the auto scaling doesn’t work anymore – does’t help much).

However, it’s fairly easy to also add the translate functions and the last two missing values of the matrix function by simply modifying the position top/left values. The only problem is that the actual behaviour then is a bit different than Webkit’s – Webkit’s translate doesn’t modify layout.

Also good to understand is the -webkit-transform-origin css function, that defaults to the center of the element in Webkit. However, in IE, and therefore also in my implemention (at this moment), the top left corner is the origin for calculations. Again, this should be easy to fix using position values.

Anyway, let’s get to the point. To show you how simple it really is to get started with Transformie, I simply included Transformie, and its dependancies Sylvester (great javascript utility, very useful for matrix multiplication!) and jQuery (was already included there, obviously) into my last blog post’s entry Coverflow, and from then it’s prety straight forward – reload Internet Explorer, and you should have CSS transforms!

One implementation detail that stands out is the usage of the terribly handy event “onpropertychange“, which almost behaves like DOMAttrChanged, but is much finer grained. It is capable of telling you whenever a DOM property changes on an element, and when you track the style attribute, it actually passes the actual style that changed along with the event. Neat, huh?

Documentation

Anyway, enough said, give it a try. It’s tested in Internet Explorer 6 and 7 and simply does nothing in other browsers. The following can be optionally configured directly after script inclusion:

  • Transformie.inlineCSS = jQuerySelector (default: “*”, defines if inline styles should be parsed for selected elements on page load [disable or narrow down for better performance])
  • Transformie.stylesheets = Boolean (default: true, defines if stylesheets are parsed on page load)
  • Transformie.trackChangesFor = jQuerySelector (default: “*”, defines for what elements changes should be tracked [disable or narrow down for better performance])

And when you’re done, simply use -webkit-transform or transform (thanks for the hint, John Resig!) in your Stylesheets or inline in the style tag.

Download

Here’s the download:

Transformie is, like jQuery, MIT/GPL double licensed.

Enjoy and leave me comments!

May200831

37

Coverflow, anyone?

The inspiration

So I was looking at all the nice things the WebKit folks did, and one particular feature really got his way into my thoughts, and I was playing with possible usecases for weeks.. I’m talking about the CSS transforms.

This handy nifty new css feature allows you to do all kinds of 2d transformations on any element on the page, by utilizing custom CSS tags. This means you can rotate and translate DOM elements, but you can also use a generic matrix function to do whatever you want.

So here is where it get’s interesting. The fun thing about CSS Transforms is that they work today, in Safari 3.1, and on the iPhone, not only in one of the nightly builds, so it’s possible to target real-world users.

So now that I had all this power, I didn’t know what to do with it, until I remembered that I always wanted to do a cool iTunes like coverflow effect, already seen countless times in flash. Also helping me to remember was an Ajaxian post about the dojo.workers a couple of days ago, which features the same coverflow effect, done by Peter Higgins.

While this dojo.workers example is absolutely fantastic work and looks brilliant however, it doesn’t feel quite like the effect: You can’t scroll at once through many items, there’s no real animation (the images are already prerendered).

The result

So after a couple hours of work, I was able to create a coverflow effect that actually flows and animates in real-time, without using canvas or prerendered graphics.

While impossible to do a real perspective transformation using WebKit right now (that would require a 3d affine matrix), I’m using the matrix and scale css functions to create a somewhat similar experience, along with some viewport and zIndex logic.

To make a nice demonstration, it uses jQuery UI to create a actual coverflow widget, and jQuery UI’s slider to be able to slide through. You can also navigate through the items by clicking on them or using the left/right keys on your keyboard.

For those of you who would like to know how I was able to create the real experience: The refresh() function that updates the viewport does unlike other examples (i.e. frash coverflow scripts) not only handle single animations, but is capable of doing true half-state renderings. Right now, this is not shown too much in the demo, but it would be actually possible to change the next/prev keyboard behaviour to not move from one item to the other, but render each single half-state inbetween.

Finally, for those of you wondering if this will become a real plugin: Indeed, it’s already commited in the 1.7 branch of jQuery UI, and along with other Webkit specific plugins, come to UI in the near future. I’ll keep you updated!