google plus photo animation with css3 or jquery?

so heres the animation

into

and this one

how can they 开发者_如何学Pythondo that? 1. re-size animation 2. stack and animate.

just CSS3 ? any example?

Thanks

Adam Ramadhan

To answer your question:

1. To resize and make image animate ( zoom in effect ) you should use something like :

   ul#pics li:hover {
       -moz-transform: scale(1.1) rotate(0deg);
       -webkit-transform: scale(1.1) rotate(0deg);
       -o-transform: scale(1.1) rotate(0deg);
       -ms-transform: scale(1.1) rotate(0deg);
       transform: scale(1.1) rotate(0deg);
   }
   

2. For stack and animate, you should use CSS3 and jQuery.

On my machine using Chrome, I see a CSS3 -webkit-transform. Since that's the only transform they're using, it must be detecting that my browser is webkit and choosing the right way to transform. They probably have various other techniques for other browsers.

However, there's no jQuery fallback, as the page doesn't use jQuery; there's probably a different JavaScript fallback developed by Google though.

Is this something you are looking for?