Comments on: 3D Cube using new CSS transformations

By: bunnyhero

bunnyhero — Mon, 11 May 2009 18:00:51 +0000

yep. i’ve used this to make a cubic panaroma viewer in safari on iphone.

http://www.bunnyhero.org/2008/10/13/iphone-vr-viewing-3d-panoramas-in-safari-using-javascript-and-webkit-transform/

my example uses javascript to manipulate the cube, but the cube itself is just css.

By: p01

p01 — Mon, 11 May 2009 14:55:31 +0000

@Lon42: Yes you can do this in IE. Like the CSS transforms used here, IE’s matrix filter does affine transformations and a such you can do skews, rotations, translations, … and a mix of them all.

By: WebReflection

WebReflection — Mon, 11 May 2009 11:22:20 +0000

I wonder who will create a JS parser able to add on the fly css rules via -all-transform or other “same but prefix” rules … I love these features but the idea to write -boring-thesamething for each browser is a bit annoying, isn’t it?

By: Jadet

Jadet — Sat, 09 May 2009 11:52:10 +0000

I don’t think that’s bad, makes it repeatable, pretty cool

By: rasmusfl0e

rasmusfl0e — Sat, 09 May 2009 01:49:28 +0000

@Lon42: a shame that its only the shapes thats rotated with perspective – the images aren’t perspective correct. To bad.

By: bogphanny

bogphanny — Sat, 09 May 2009 01:24:46 +0000

It appears that my above-mentioned bug only affects the Mac release of Firefox.

By: bogphanny

bogphanny — Sat, 09 May 2009 01:14:11 +0000

I was curious to see how scollbars would render with the -moz-transform(skew) property when overflow:scroll was set. In the case of Firefox, it turns out not too well, as can be seen here: http://www.users.on.net/~egwhite/moz-transform.scrollbar.bug.html

For those interested, I have raised a bug with Mozilla (#492155)

By: Lon42

Lon42 — Sat, 09 May 2009 00:09:15 +0000

@rasmusfl0e: and that is exactly what safari on iphone does. for a demo view http://quento.q42.net/fotowall/index.html or http://quento.q42.net/ahrecepten/index.html.
both only on iphone.
i expect non-iphone-safari to follow. lthough it’s been some time already…

By: rasmusfl0e

rasmusfl0e — Fri, 08 May 2009 23:39:48 +0000

Orthogonal 3d is excellent for diagrams and charts – but for anything else people will probably want to have real perspective which of course isn’t hackable through skewX/Y.

By: Lon42

Lon42 — Fri, 08 May 2009 23:01:31 +0000

no you cannot do this in IE using the matrix filter.
the matrix filter only does scaling and rotating in the plane of the screen.
no perspective, no skewing. no fun.

By: jonathansnook

jonathansnook — Fri, 08 May 2009 16:06:42 +0000

You can use the matrix filter in IE to do these kinds of transforms, as well. There’s no transform functions, so it can be a little confusing.