On Tue, Dec 27, 2011 at 1:19 PM, Peng Yu <[email protected]> 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.
--
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 [[email protected]]
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"](https://www.google.com/intl/en_com/images/srpr/logo3w.png"){kind=link}