-
200920 Jul
Posted in Browsers, CSS3 Previews, News
Simon Fraser announces support for CSS 3D Transforms, on Mac OSX Leopard, in the latest Webkit nightlies.
If you’re running a recent Webkit nightly build (downloadable from here) on Mac OSX Leopard you should take a look at this live example.
Update: For those of you who aren’t lucky enough to have access to a mac, take a look at the video below for a preview of 3D Transform in action.
You can read the full article on the Webkit Blog.
You can skip to the end and leave a response.
-
Comments
-
01.
Tom Edwards says:Comment » July 20th, 2009 at 8:17 pm
That’s cool and all, but is it sensible? No wonder 3 is taking so goddamn long to come out!
-
02.
I wish somebody would post a video of this as I don’t have a Mac.
-
03.
@ Neal G – I’m in exactly the same boat here! If anyone has a mac and some spare time to make a video, please get in touch and i’ll post it on the site.
-
04.
OK, I managed to get my hands on a Mac and have uploaded a video of the preview in action. It’s a pretty nifty effect, but I have to agree with Tom as to its practicality, if anyone has any thoughts on how it could be used please feel free to share them. Luckily 3D Transforms isn’t seen as a high priority by the CSS3 working group at present, so it shouldn’t slow down the development of other modules.
-
05.
CyberSkull says:Comment » July 21st, 2009 at 4:36 am
You can download the WebKit nightly build for Windows too. You just need Safari installed (both version of the nightly build use Safari as it’s GUI base).
-
06.
Unfortunately the Windows version doesn’t currently support 3D transform.
-
07.
-
08.
The says:Comment » July 21st, 2009 at 10:47 pm
It’s CSS, detecting a mouse hover or element focus is as dynamic as it gets. Of course, you could add in JavaScript, but then you would be better of with Canvas3D anyway.
-
09.
I would like to clarify the difference between this and Canvas/Google’s O3D/Mozilla’s 3D efforts.
Canvas (and incidentally all 3D APIs as well) are semantically purposed for the dynamic generation of image data — not for building a UI, not for presenting markup. Dynamic images. That’s it.
CSS, on the other hand, IS for presentation of markup data, which 3D does fall under, just the same as shadows and, of course, 2D positioning. You wouldn’t use Canvas to give a textarea a shadow, or position it in your comments form, just like you wouldn’t use Canvas3D to give it a depth perspective.
-
10.
Granted this is a cool effect, I’m with the others questioning the practicality of it. It seems like something that we’re going to see a whole lot of when it comes out because developers can. I, for one, am not looking forward to spinning & rotating menus and what not because we now have the ability to have spinning & rotating menus…
-
11.
Keith says:Comment » July 23rd, 2009 at 3:53 am
I would argue that if you can’t figure out what to do with a new tool, it is strictly your problem. Let people with talent think for you, I guess?
-
12.
[…] Link: Video der 3D-Transformation […]
-
13.
what the hell. :D very nice, never thought its possible in css3 or else… really nice. :)
-
14.
Ah finally! But i want to know when it will be compatible with adobe air aplications in all operation systems or browsers that uses the webkit engine
-
15.
Hugheth says:Comment » August 4th, 2009 at 1:20 pm
Is there any indication as to when 3D Transforms will be available on Windows platforms?
-
16.
Milan says:Comment » August 4th, 2009 at 3:08 pm
This is all very nice and I hope it will be used for a good purpose. I don’t want, when css3 becomes standard, to see a website that some kid made and overloaded it with this effects like it was a case few years ago with javascript.
-
17.
Personally, I am looking forward to CSS3 with all of its bells and whistles. I will be revolutionizing my site when CSS3 is finally standardized. Hopefully by then IE will support it, however, I just wish IE was outlawed.
-
18.
Sorry to dredge up an old thread, but IMHO, the practicality comes from being able to design a site that looks like this (admittedly crappy, quickly-thrown-together) mock-up of Yahoo!’s homepage:
http://Dabe.com/images/Yahoo-Homepage-Trifold.png
A lot of information can be inferred by an element’s “depth”, relative to other sections of a page…
-
19.
[…] Webkit Announces Support for CSS 3D Transforms […]
-
20.
Ruotare scalare, e ombre su testi grazie ai css3 | MultiMediArt says:Comment » December 20th, 2009 at 4:31 pm
[…] Webkit Announces Support for CSS 3D Transforms […]
-
21.
Kuutio » 3d-kirja Javascriptillä vai oma ristiinkääntäjä? says:Comment » December 22nd, 2009 at 9:02 am
[…] ajattelin käyttää siihen Box2d-fysiikkaengineä ja WebGL:ää – tai sitten css3-transitioita. Box2d-kirjastosta on olemassa Javascript-porttaus, joka pohjautuu vanhaan ActionScript-versioon […]
-
22.
I am a little disappointed by some of the pessimism in the comments.
Guys, of course we will have teenage kids creating annoying pages with rotating menus. So what? A good designer will use the 3D features of CSS3 wisely and create user experiences like we have never seen on the Web. Not without using Flash anyway.
-
23.
[…] Webkit Announces Support for CSS 3D Transforms CSS3.info 制作的一个使用CSS3动画的demo，目前只支持nightly build 版的WebKit. […]
- 24.
-
25.
I am looking forward to CSS3 – so much so that I just went on a mission to download IE9 – now that is a sign of desperation!
-
26.
[…] Webkit Announces Support for CSS 3D Transforms CSS3.info 制作的一个使用CSS3动画的demo，目前只支持nightly build 版的WebKit. […]
-
27.
http://siteexplorer.search.yahoo.com
-
28.
In this demo appears the Demon Number three sixtys
-
29.
“In this demo appears the Demon Number three sixtys ” Haha, thats really funny – The video is nothing like what you show above; 3 lines of numbers with values of 4, 5, 6, 11 and 10 squeeze, narrow and rotate on there own line from independent starting points. So the numbers all rotate around three 6’s. This is a very weird decision from the Google brain who probably thought it a rather funny way of generating some extra interest.
As for the animation, the fact that it uses CSS is irrelevant because this is only achieved through javascript, which could do this with or without css anyway.
-
30.
[…] Webkit Announces Support for CSS 3D TransformsCSS3.info 制作的一个使用CSS3动画的demo，目前只支持nightly build 版的WebKit. […]
-
31.
What You Need To Know About Behavioral CSS « Upon a Star says:Comment » January 1st, 2011 at 11:52 am
[…] Webkit Announces Support for CSS 3D Transforms15 CSS3.info has a great demo of CSS 3 animations that are supported by the nightly build of WebKit. […]
-
32.
-
33.
[…] Webkit Announces Support for CSS 3D Transforms CSS3.info 制作的一个使用CSS3动画的demo，目前只支持nightly build 版的WebKit. […]
-
34.
-
35.
[…] Webkit Announces Support for CSS 3D Transforms CSS3.info 制作的一个使用CSS3动画的demo，目前只支持nightly build 版的WebKit. […]
-
36.
You have a great website. I am currently looking for sites showing interest in gadgets and gizmos.
-
37.
[…] Webkit Announces Support for CSS 3D Transforms CSS3.info 制作的一个使用CSS3动画的demo，目前只支持nightly build 版的WebKit. […]
-
38.
[…] Webkit Announces Support for CSS 3D Transforms CSS3.info 制作的一个使用CSS3动画的demo，目前只支持nightly build 版的WebKit. […]
-
39.
[…] Webkit Announces Support for CSS 3D Transforms CSS3.info 制作的一个使用CSS3动画的demo，目前只支持nightly build 版的WebKit. […]
-
40.
[…] Webkit Announces Support for CSS 3D TransformsCSS3.info 制作的一个使用CSS3动画的demo，目前只支持nightly build 版的WebKit. […]
-
41.
[…] Effects Net Tuts 发布的一个很酷的关于CSS3效果的视频。 Webkit Announces Support for CSS 3D Transforms CSS3.info 制作的一个使用CSS3动画的demo，目前只支持nightly build […]
-
01.
