As David experienced serious bugs with extensions in Safari 5.0.5 in 10.6.8 (latest version using the legacy WebKit which is backported by this project), he has appearently lost interest in continuing the Snow Leopard port. Note: This is the last version of Chrome that will run on Mac OS X 10.5.8 Leopard. (undocumented) 22.0.1229 2012-09-25 WebKit 537.4 3.12.19 New-style packaged apps are enabled by default. New menu icon, replacing the wrench icon; Support for TLS 1.1; Support for color management ICC v2 profiles by default; 23.0.1271 2012-11-06.
A couple weeks ago, we noted that Apple's 3D CSS Transforms were slowly coming to the desktop via Safari 4, at least on Snow Leopard. Over this past weekend, though, WebKit developers put in a small patch that enables 3D CSS transforms in the latest nightly build of WebKit for Leopard, too.
The WebKit team developed a series of two-dimensional transforms that can be applied with CSS properties, then added the ability to animate them over time. Those transforms were used for the Safari 4 'welcome page' that is loaded whenever Safari 4 is first launched. Mozilla recently implemented support for two-dimensional transforms in the Gecko 1.9.1 rendering engine, which is used in Firefox 3.5.
The WebKit team later extended the transforms to work in three dimensions and then added the ability for the transforms to be rendered using a GPU, saving valuable CPU cycles for other work. The 3D transforms first became available in iPhone OS 2.0 so that Web app developers could add some advanced visuals with no additional programming expertise. Apple eventually submitted the revised 3D CSS transforms to the W3C for consideration as an official CSS standard. Since then, Apple enabled them in Snow Leopard builds of Safari 4, but had until this weekend left Leopard users out of the fun.
Comments on a bug report requesting the feature to be added to desktop versions of WebKit suggested that there were technical limitations that prevented support for the 3D transforms in Leopard. But a look at the code changes indicates that checks for Leopard were merely removed from the build process so that the feature would be 'turned on' for Mac OS X versions 10.5 and above.
Leopard users can now get a feel for what the transforms can do by looking at several demos.
Web developer Charles Ying has put together an impressive photo browser called Snow Stack, which pans a series of photos in 3D and allows a better look at each image by zooming it 'closer' to the viewer.
AdvertisementChicago-based developer Peter Zich also updated demos he created for the iPhone to work on the desktop as well, including his 3D 'model' of a van and an impressive 3D photo browser that spins on all three axes.
A cursory look at performance indicates that moving the transform functions to the GPU results in a much lower use of the CPU. These demos purr along in the newest WebKit on Leopard, while running even simple 2D transforms in Safari 4 on Leopard can crank up the CPU on my (admittedly) aging first-gen MacBook.
Results in Snow Leopard appear to be perhaps an order of magnitude better—while Snow Stack runs very smoothly in Snow Leopard, it does occasionally suffer from sputters and frame drops on Leopard. This suggests that something in the graphics pipeline of Snow Leopard is more optimized than Leopard, and may be the reason the WebKit team was reluctant to enable the feature on Leopard before now.
Support for the 3D transforms has yet to be enabled for Windows or Linux platforms, though the team has encouraged the filing of bug reports for those platforms requesting that support be added. And while Firefox 3.5 has its own support for CSS transforms on those platforms, unlike WebKit it doesn't yet support the Z axis and also doesn't yet support GPU acceleration.
Leopard Webkit Vs Tenfourfox
There is already an effort underway to create a full JavaScript-based API for creating 3D graphics within a browser, but the 3D CSS transforms offer those without experience in complex 3D programming a way to add 3D effects using the skills they already have. Progress from both the Mozilla and WebKit teams suggests that such 3D effects will become more mainstream as support for the standard grows, on mobile platforms as well as on the desktop. And from the looks of these early demos, it seems like we can expect some impressive things to come.
Further reading:
If you're a developer with access to Snow Leopard, or you're running Leopard and the latest WebKit nightly build, you can check out the following demos.
- Charles Ying's Snow Stack photo browser
- Peter Zich's 3D Van 'model' rotating in space
- Peter Zich's 3D Image Fly, another image browser (hint: click and drag to rotate)
WebKit on Mac OS X now has support for CSS 3D transforms, which allow you to position elements on the page in three-dimensional space using CSS. This is a natural extension of 2D transforms, which we described in an earlier blog post. 3D transforms have been supported on iPhone since 2.0, and now we’re please to announce that we have currently added support for Leopard and later.
If you want to jump right in and see a demo, make sure you’re running recent WebKit nightly build on Leopard or later, and load this example:
Here’s a screenshot for those not running a recent-enough WebKit (if you are, hover over it for a treat!):
Like many of the examples you’ll see here, this one combines CSS transforms with CSS transitions and animations to great effect.
3D transforms are applied via the same -webkit-transform property as 2D transforms. For example, here’s how to rotate an element about the Y (vertical) axis:
There are several new transform functions available for use in the -webkit-transform property:
- translate3d(x, y, z), translateZ(z)
- Move the element in x, y and z, and just move the element in z. Positive z is towards the viewer. Unlike x and y, the z value cannot be a percentage.
- scale3d(sx, sy, sz), scaleZ(sz)
- Scale the element in x, y and z. The z scale affects the scaling along the z axis in transformed children.
- rotateX(angle), rotateY(angle), rotate3d(x, y, z, angle),
- The first two forms simply rotate the element about the horizontal and vertical axes. Angle units can be degrees (deg) radians (rad) or gradians (grad). The last form allows you to rotate the element around an arbitrary vector in 3D space; x, y and z should specify the unit vector you wish to rotate around (we’ll normalize it for you).
- perspective(p)
- This function allows you to put some perspective into the transformation matrix. For an explanation of p, see below. Normally perspective is applied via the
-webkit-perspectiveproperty, but this function allows you to get a perspective effect for a single element, with something like: - matrix3d(…)
- This function allows you to specify the raw 4×4 homogeneous transformation matrix of 16 values in column-major order. Have fun with that!
We’ve also extended one other CSS transform property, and implemented the four other 3D-related properties described in the spec:
-webkit-transform-origin now accepts three values, allowing you to specify a z offset for the transform origin.
-webkit-perspective is used to give an illusion of depth; it determines how things change size based on their z-offset from the z=0 plane. You can think of it as though you’re looking at the page from a distance p away. Objects on the z=0 plane appear in their normal size. Something at a z offset of p/2 (halfway between the viewer and the z=0 plane) will look twice as big, and something at a z offset of –p will look half as big. Thus, large values give a little foreshortening effect, and small values lots of foreshortening. Values between 500px and 1000px give a reasonable-looking result for most content.
The default origin for the perspective effect is the center of the element’s border box, but you can control this with -webkit-perspective-origin.
Here’s an example that shows how perspective works:
The interesting thing about -webkit-perspective is that it does not affect the element directly. Instead, it affects the appearance of the 3D transforms on the transformed descendants of that element; you can think of it as adding a transform that gets multiplied into the descendant transforms. This allows those descendants to all share the same perspective as they move around.
We’ve described how you can assign 3D transforms to elements and make them look three-dimensional with some perspective. However, so far, all the effects are really just painting effects. Those transformed children are still rendering into the plane of their parent; in other words, they are flattened.
When you start to build hierarchies of objects with 3D transforms, flattening is not what you want. You want parents and children to live in a shared three-dimensional space, and to all share the same perspective which propagates up from some container. This is where -webkit-transform-style comes in.
-webkit-transform-style has two values:
flat: This is the default value, and gives the behavior described above; transformed children are flattened into the plane of their parent (think of the 3D transform as simply a painting effect).preserve-3d: This value states that the element to which it is assigned does not flatten its children into it; instead, those children live in a shared 3D space with the element.
Here’s an example that shows transform-style in action:
A common pattern, therefore, is to have content that looks like this:
Here both ‘leaf’ and ‘box’ share the same 3D space, so both appear with the perspective specified on the container. ‘box’ can also be rotated with a transition or animation, and ‘leaf’ will move around as ‘box’ moves, in perspective.
One thing you may have noticed in these demos is that it’s quite common to have a 3D transform that flips an element around so that you can see its reverse side. In some cases you don’t want the element to appear at all in this situation (say, for example, you want to position two elements back-to-back, so you need to hide the one that’s facing away from the viewer). This is the reason for the last 3d-related property, -webkit-backface-visibility. Its two values—visible (the default), and hidden—specify whether the element is visible or not when that element is transformed such that its back face is towards the viewer.
Leopard Webkit Download
Here’s a final example that shows backface-visibility in action, along with more 3D goodness, animations and transitions:
Leopard Webkit Youtube
For more information, see the CSS working drafts on 2D transforms, 3D transforms, transitions and animations. There is also documentation in the Safari Reference Library.
Leopard Webkit Install
We hope you have a blast with these new features, and share your creations with us. If you find bugs, please report them at bugs.webkit.org.