On 1/07/2011 1:25 AM, Mark Volkmann wrote:
On Wed, Jun 29, 2011 at 10:12 PM, Alan Gresley<a...@css-class.com> wrote:
Possibly here. http://css-3d.org/ Note that the branding does not have perspective, thus the occasional illusion where the cube distorts and spins in the reversed direction (right to left) before it switches back again.I checked there, but didn't see an example of what I'm looking for. I want to see a demonstration of this from the 3D Transforms Working Draft ... "The ‘transform-style’ property defines how nested elements are rendered in 3D space. If the ‘transform-style’ is ‘flat’, all children of this element are rendered flattened into the 2D plane of the element. Therefore, rotating the element about the X or Y axes will cause children positioned at positive or negative Z positions to appear on the element's plane, rather than in front of or behind it. If the ‘transform-style’ is ‘preserve-3d’, this flattening is not performed, so children maintain their position in 3D space." I created a basic flip demo where a "card" flips on hover. There is an image on the front and three lines of text on the back. The lines of text all have different z-index values and a transform to different z locations using translateZ. Here's the CSS for those lines: #line1 { transform: translateZ(10px); z-index: 1; } #line2 { transform: translateZ(20px); z-index: 2; } #line3 { transform: translateZ(30px); z-index: 3; } When the flip to the text side occurs, the three lines of text appear to be on the same plane despite the fact that I set "-webkit-transform-style: preserve-3d;" for the face that contains the text. So I'm looking for an example that demonstrates how the transform-style value of preserve-3d differs from flat.
OK, here is a very good demo. http://www.webkit.org/blog-files/3d-transforms/transform-style.html This was found here. http://www.webkit.org/blog/386/3d-transforms/ -- Alan Gresley http://css-3d.org/ http://css-class.com/ ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
