Comments on: 3D transforms in Firefox 3.5 – the isocube

By: generic ISOCUBE | Björn Kahlert

generic ISOCUBE | Björn Kahlert — Wed, 26 Oct 2011 23:44:09 +0000

[...] Johnson and Paul Hayes showed some really nice examples of the CSS 2D transformation capabilites (isocube, 3D isocube using 2D [...]

By: Murray

Murray — Mon, 24 Oct 2011 23:23:35 +0000

I like how we can use these transformation options to create the isometric planes, but positioning them is a nightmare.

“You can use matrix math to do this” – this is clearly an understatement.

I would really like a follow up article focused on automatically positioning the different planes so they line up exactly.

I’m using the transformations to display a box of varying size with patterns and text on each face. So all I need is the simple math functions where I feed in the dimensions of the face and it returns the HTML top and left values to position the face. Can anybody help?

Cheers
Murray

By: Scott Gale

Scott Gale — Sun, 29 May 2011 12:53:01 +0000

Thanks for writing this post. It helped as I was building out this CSS coverflow example: http://scottgale.com/blog/coverflow-css-3d-transforms/2011/05/24/

By: Flash a tué HTML5 | Adnane najemi

Flash a tué HTML5 | Adnane najemi — Mon, 21 Mar 2011 00:11:59 +0000

[...] une vidéo sur un plan 3D. Si votre interlocuteur insiste, ne vous laissez pas tromper par ce genre de démonstration : il y a certainement du Flash quelque part. Si l’on tente de vous prouver que cette [...]

By: Recap du Paris Web 2010 « Blog de Web3os

Recap du Paris Web 2010 « Blog de Web3os — Thu, 24 Feb 2011 19:58:08 +0000

[...] border ….. et transition http://css3pie.com/ -> idem http://selectivizr.com/ ->CSS3 pour IE http://hacks.mozilla.org/2009/06/3d-transforms-isocube/ -> la puissance de css3 permetant de creer effet 3D http://www.fontsquirrel.com/fontface ->font [...]

By: freemh

freemh — Sun, 25 Jul 2010 12:33:46 +0000

Looks great! , expects that it works on internet explore , Here is another example that I found interesting :
http://depotwebdesigner.com/tutorials/how-to-create-3d-cube-with-css3.html

By: Magne Andersson

Magne Andersson — Tue, 22 Dec 2009 21:01:07 +0000

@Hdaes32 That’s like asking why they even exist. At the time this was added to Gecko, it wasn’t a finished spec, therefore it must only support the properties with the prefix, just like any other engine/browser. I’m pretty sure the spec still isn’t stable enough.

By: Hdaes32

Hdaes32 — Tue, 22 Dec 2009 10:40:29 +0000

Why didn’t you add the non “-moz-” properties? :(
Damn fanboys…

By: 谋智社区 » Blog Archives » 颠覆网络35天 ─ Firefox 3.5中的3D变形：isocube

谋智社区 » Blog Archives » 颠覆网络35天 ─ Firefox 3.5中的3D变形：isocube — Fri, 24 Jul 2009 03:33:40 +0000

[...] 原文地址：3D transforms in Firefox 3.5 – the isocube 系列地址：颠覆网络35天 [...]

By: WebKit支持OS X 3D CSS变换 « 每日IT新闻，最新IT资讯，聚合多站点消息，保证你与世界同步

WebKit支持OS X 3D CSS变换 « 每日IT新闻，最新IT资讯，聚合多站点消息，保证你与世界同步 — Thu, 16 Jul 2009 10:29:43 +0000

[...] 写道” Safari 4浏览器核心WebKit在最近的一次更新中加入了3D CSS变换支持，FireFox 3.5也支持该特性。3D [...]

By: Andre

Andre — Wed, 15 Jul 2009 14:34:50 +0000

Are there w3c approved equivalents of these properties

By: Everything Tech » Blog Archive » First look: Firefox 3.5 released, ready to “upgrade” the Web

Mon, 06 Jul 2009 02:13:33 +0000

[...] are supported too, making it possible to rotate and skew page elements. This feature has been used experimentally to simulate isometric 3D rendering. In the following image, a playable video and selectable text [...]

By: aroth

aroth — Fri, 03 Jul 2009 23:47:44 +0000

Add javascript to make the cube rotate in 3D, please.

By: Upgrade to Firefox 3.5 on Ubuntu 9.04 – Jaunty Jackalope | gaarai.com

Upgrade to Firefox 3.5 on Ubuntu 9.04 – Jaunty Jackalope | gaarai.com — Thu, 02 Jul 2009 00:26:05 +0000

[...] 3-D cubes built with standard HTML content, including the new native video component. [...]

By: SelenIT

SelenIT — Wed, 01 Jul 2009 18:04:54 +0000

Looks great! Thanks, Zachary and Christopher!

But I’d like to suggest a little “improvement”: to replace the meaningless empty divs for the shadows of the cubes with other CSS3 (something like -moz-box-shadow: -398px 200px 3px rgba(0, 0, 0, 0.5); and the same with -webkit- for the top sides, this worked for me in Firefox 3.5, Safari 4/Win and Chrome 2).

By: » Blog Archive » First look: Firefox 3.5 released, ready to “upgrade” the Web

Wed, 01 Jul 2009 15:20:00 +0000

By: Firefox 3.5 Released, Detailed Feature Review. | Taranfx: Technology Blog

Firefox 3.5 Released, Detailed Feature Review. | Taranfx: Technology Blog — Tue, 30 Jun 2009 17:44:10 +0000

By: DarthNihilus

DarthNihilus — Mon, 29 Jun 2009 19:51:22 +0000

Does not work correctly with FF 3.5 RC 3. Somehow they overlab eachothers font, i don’t know…

By: Monthly Interesting Links Roundup (June 2009) - 2

Monthly Interesting Links Roundup (June 2009) - 2 — Fri, 26 Jun 2009 07:40:49 +0000

[...] CSS 3D transforms. Try the demo, and don’t forget to select some text on the page http://hacks.mozilla.org/2009/06/3d-transforms-isocube/ [...]

By: Quezako

Quezako — Mon, 22 Jun 2009 18:51:39 +0000

@Alexandre did you try to deactivate all your add-onds?
I have no problem with Firefox 3.5 RC2 + Windows 7 x64.