On Wed, Jun 29, 2011 at 10:12 PM, Alan Gresley <a...@css-class.com> wrote:
> On 30/06/2011 8:24 AM, Mark Volkmann wrote:
>>
>> I'm pretty sure I understand what setting -webkit-transform-style to
>> preserve-3d is supposed to do, but I see no difference between that
>> and the value flat.
>> Can someone point me to an example that demonstrates a 3d effect
>> during a flip (rotate) transform?
>
>
> 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.
--
R. Mark Volkmann
Object Computing, Inc.
______________________________________________________________________
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/
