On Wed, Dec 28, 2011 at 9:08 PM, Ghodmode <ghodm...@ghodmode.com> wrote:
> On Tue, Dec 27, 2011 at 1:19 PM, Peng Yu <pengyu...@gmail.com> wrote:
>> Hi,
>>
>> I thought that, among the 3rd google logo or the 4th google logo, one
>> should slip above the other should slip under the previous log,
>> because the z values are different. But both of them slip above the
>> previous logo. I guess that I still don't completely understand the
>> meaning of the third argument of translate3d. Could anybody help
>> understand it? Thanks!
>
> I don't think I fully understand it myself yet, but I was able to get
> the desired effect by adding the following two rules:
>
> div#-z {
> -webkit-transform: translate3d(0, 0, 100px);
> }
> div#z {
> -webkit-transform: translate3d(0, 0, 200px);
> }
>
> I don't know if it's a bug or a poor implementation or a feature, but
> some things won't animate. It looks like the Z axis is one of them.
> So, when you tried to move div#-z back during hover, it didn't happen.
> However, with the two rules above, div#-z is above div#y and below
> div#z when the page renders.
>
> I guess this effectively means that 3d transforms don't work because
> the effect is the same as the regular translate function. I must be
> missing some detail.
This issue has been bugging me, so I continued to work on it. I found
that the key to full use of the translate3d transform function is in
the -webkit-perspective and -webkit-transform-style properties.
-webkit-perspective:
http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_perspective
-webkit-transform-style:
http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_transform_style
The perspective gives a base distance in 3d space for transformations.
The larger the number is, the farther away the object is in 3d space.
The transform-style tells the browser whether or not to keep the
z-axis position during transformations. The default if it's not set
is to flatten the object and its children.
For example:
#container {
-webkit-perspective: 800px;
-webkit-transform-style: preserve3d;
}
Where the #container contains the elements manipulated with
-webkit-transform:translate3d.
I've prepared a live example that shows three elements laid out in 3d space
http://www.ghodmode.com/experiments/translate3d/
Tested on Chromium (Google Chrome) on Linux and Safari on Windows...
And I looked at it on Android stock browser (Android 2.3.7), Dolphin
Browser HD (Android), and Maxthon (Android), which are all
webkit-based but don't support any of this.
This article got me pointed in the right direction:
http://www.netmagazine.com/tutorials/create-progressively-enhanced-3d-css-rollovers
This page at caniuse.com tells me that there will be full support for
this stuff in IE10, FF10, and Android Browser 4.0
http://caniuse.com/transforms3d
--
Ghodmode
http://www.ghodmode.com/blog
>> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
>> "http://www.w3.org/TR/html4/loose.dtd";>
>> <html>
>> <head>
>> <style type="text/css">
>> div {
>> position:relative;
>> left:200px;
>> top:200px;
>> -webkit-transition:2s;
>> }
>> div#x:hover {
>> -webkit-transform:translate3d(100px,0,0);
>> }
>> div#y:hover {
>> -webkit-transform:translate3d(0,100px,0);
>> }
>> div#-z:hover {
>> -webkit-transform:translate3d(0,-100px,-100px);
>> }
>> div#z:hover {
>> -webkit-transform:translate3d(0,-100px,100px);
>> }
>> </style>
>> </head>
>> <body>
>> <div id='x'>
>> <p>x</p>
>> <img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png";>
>> </div>
>> <div id='y'>
>> <p>y</p>
>> <img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png";>
>> </div>
>> <div id='-z'>
>> <p>-z</p>
>> <img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png";>
>> </div>
>> <div id='z'>
>> <p>+z</p>
>> <img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png";>
>> </div>
>> </body>
>> </html>
>>
>>
>> --
>> Regards,
>> Peng
______________________________________________________________________
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/
![http://www.google.com/intl/en_com/images/srpr/logo3w.png"](http://www.google.com/intl/en_com/images/srpr/logo3w.png"){kind=link}