More WebKit Goodies - CSS Transforms and Transitions - the OSX Dock example
As promised last time, I here we will discuss the transforms in WebKit, and how they can be used to create interactive applications without Javascript (for animation that is – we still need it for AJAX, etc.)
Tranforms have been implemented on a few browser using proprietary syntax, and the same is true of WebKit. As we shall see further down the article though, the WebKit transitions make them so much more powerful.
But what are they? They modify an element, without displacing it’s original setting within the document, which means we can move it about and the spacing doesn’t change.
Remember these will only work in WebKit based browsers, for example Safari for Mac, Chrome for Windows or Midori for Linux
An example: how about rotation.
element:hover {
-webkit-transform:rotate(180deg);
}
Not very exciting, but combine this with a transition! (Try putting you mouse in the middle of the box for best effect)
element:hover {
-webkit-transform:rotate(180deg);
}
element {
-webkit-transition:-webkit-transform 1s linear
}
Much more useful! But there’s more, we can scale, we can translate (change its position on the screen) and also we can change the “center” for the transform. Usually the rotation happens from the center like above, but we could do it from closer to the left:
element:hover {
-webkit-transform:rotate(180deg);
-webkit-transform-origin:30% 50%;
}
element {
-webkit-transition:-webkit-transform 1s linear;
-webkit-transform-origin:30% 50%;
}
Or we could scale and move and rotate! (you might need to track it with you mouse to keep the animation! this is a demo after all!)
element:hover {
-webkit-transform:rotate(180deg) scale(2) translate(-100%,0);
-webkit-transform-origin:30% 50%;
}
element {
-webkit-transition:-webkit-transform 1s linear;
-webkit-transform-origin:30% 50%;
}
As the above eaxmple showed, hover is not always the best trigger for this. So lets use the :target pseudo-class. This is the pseudo-class that is applied when the element is the ‘target’ of an anchor/url hash. e.g:
<div id='hey-look-at-me'> <div id='untarget'> <pre>
CSS:
#hey-look-at-me:target pre {
outline:2px solid red;
color:#f0f;
}
#hey-look-at-me pre {
-webkit-transition-property:outline, color;
-webkit-transition-duration:500ms;
}
</pre> </div> </div>
target me! untarget me!
NB: Notice how I nested the PRE to stop unwanted excessive screen movement.
So, what can we do with all this? Well, the culmination of the post, the Mac OSX style Dock menu, using no Javascript. Yes, that’s right a bulging docked menu, with no javascript.
Just so you remember, there no javascript in the demo.
Check out the Javascript free OSX Dock Menu Demo.
[...] tests: HTML File API Demo HTML Drag & Drop API Demos Webkit CSS Transforms Demos and CSS Transitions Demos HTML WebGL API [...]
HTML5 and CSS3 browser compatibility table | xaguilars.com
11 Dec 09 at 14:34
[...] 2. CSS Transforms and Transitions - The OSX Dock example [...]
7 hilfreiche Tutorials zum Thema Transitions in CSS3 | Emanuel Kluge – Zeitgenössisches Web-Design aus Hannover
26 Feb 10 at 09:30