W3C home > Mailing lists > Public > www-style@w3.org > January 2011

RE: [css3-transform] definition of skewing

From: Rik Cabanier <cabanier@adobe.com>
Date: Tue, 18 Jan 2011 17:39:31 -0800
To: Simon Fraser <smfr@me.com>
CC: Chris Marrin <cmarrin@apple.com>, "www-style@w3.org" <www-style@w3.org>
Message-ID: <8A13F0222395BD428969E5BA529EFA7477672538AC@NAMBX01.corp.adobe.com>
Very cool!
However, won't this fall apart when there are other elements on the page and in the same location?

Rik

From: Simon Fraser [mailto:smfr@me.com]
Sent: Tuesday, January 18, 2011 4:06 PM
To: Rik Cabanier
Cc: Chris Marrin; www-style@w3.org
Subject: Re: [css3-transform] definition of skewing

On Jan 17, 2011, at 5:13 PM, Rik Cabanier wrote:


I've attached an example.
It simply rotates a symbol 360 degrees around one of the axis.

Let me know if the attachment doesn't make it and I'll post it online.


Here's the CSS 3D transforms equivalent:
<http://smfr.org/misc/spinny.html>

View this in Safari 5 on Mac or Windows for actual 3D. In Chrome, it will fall back to flattened-3D, which, ironically, looks closer to your sample.

Using actual 3D transforms to express a flip like this also looks better: it doesn't suffer the Necker cube effect.

Note that I didn't have to muck with z-order or add any extra elements.

Simon
Received on Wednesday, 19 January 2011 01:40:13 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:36 GMT