(tip N3 themes2) Thumbnail img 3-D animation, photos page and module + Groups Updated 4-1-14

[George H. Compton IV]

 New version 3.2.1

Enjoy the animation code :-)  

click here to see it live   

The code goes in your design studio CSS section

/* GEOCOM's photos page and module + Groups thumbnail img 3-D animation */
A.matrix-item.matrix-sheet {
   border: 5px solid rgba(249, 74, 246, 0.43)!important;
   border-radius:11px 3px 11px 3px!important;
   box-shadow: 0px 6px 6px 3px rgba(222,  34,  186,  0.2)!important;
   transition:all 1s ease-in-out!important;} 
LI.matrix-itemFluid.groupHub-group,
A.matrix-item.matrix-sheet DIV.matrix-media-4-3 {
   z-index:1!important;
   position: inherit!important;}
 A.matrix-item.matrix-sheet:hover {
   border: 5px solid rgba(000, 000, 000, 0.73)!important;
   border-radius:3px 11px 1px 11px!important;
   box-shadow: 0px 200px 15px 8px rgba(000, 000, 000, 0.43)!important;
   transform: matrix(1.5, 0.5, 0.2, 0.9, 0.0, 20.2)!important;
   -webkit-transform: matrix(1.5, 0.5, 0.2, 0.9, 0.0, 20.2)!important;
   transition:all 1.0s ease-out!important;
   z-index:2!important;}
/* End 3-D animation Ning3 */

[dave]

I've just switched to themes 2 today Jim and i'm starting to do a clean on the design studio :) Your site looks incredible and i bet your over the moon with Joy :) 

[Sir Gissachance]

Dear George,

Just loaded the photo page module and group thumbnail img code and it worked just fine. Thank you for sharing.

Best Regards,

Sir Gissa

[George H. Compton IV]

You're welcome :-) Hope you're having a wonderful day.

[Scott Bishop]

George, check out this 3D animation. It's done in Amazon's aStore Affiliate program but all it was is a little css coding kind of like what you have going on: Quiksilver Surf Apparel 
Then once you go to an actual product page you'll see a different 3D animation. 

[George H. Compton IV]

Scott I've always like that old school spinning animation.
Here's the spinning animation codes for Ning 2.0 and 3.0. :-)

/* GEOCOM's N3.0 photos page and module img + Groups thumbnail spin */
A.matrix-item.matrix-sheet {
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
        -webkit-transition-property: all;
        transition-property: all;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-timing-function: ease-in-out;
        transition-timing-function: ease-in-out;
        -webkit-transition-delay: 0s;
        transition-delay: 0s;}

A.matrix-item.matrix-sheet:hover {
     -ms-transform: rotate(360deg)!important;
     -webkit-transform: rotate(360deg)!important;
     transform: rotate(360deg)!important;
     opacity: 0.7;}


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


/* GEOCOM's N2.0 photos page and module img spin */
IMG.xg_lightborder {
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
        -webkit-transition-property: all;
        transition-property: all;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-timing-function: ease-in-out;
        transition-timing-function: ease-in-out;
        -webkit-transition-delay: 0s;
        transition-delay: 0s;}

IMG.xg_lightborder:hover {
     -ms-transform: rotate(360deg)!important;
     -webkit-transform: rotate(360deg)!important;
     transform: rotate(360deg)!important;
     opacity: 0.7;}

[Matthew Aukai Wright]

Hi there. How can I make the border around the image rainbow? Can you please help me on this. Thank you!

[George H. Compton IV]

Rainbow Border

Hello Matthew, this will do the trick. :)

/* GEOCOM's photos page and module  thumbnail img 3-D animation */
A.matrix-item.matrix-sheet {
border: 5px solid rgba(249, 74, 246, 0.43)!important;
background-image: linear-gradient(90deg, #00C0FF 0%, #FFCF00 49%, #FC4F4F 100%);
border-radius:11px 3px 11px 3px!important;
box-shadow: 0px 6px 6px 3px rgba(222, 34, 186, 0.2)!important;
transition:all 1s ease-in-out!important;}
LI.matrix-itemFluid.groupHub-group,
A.matrix-item.matrix-sheet DIV.matrix-media-4-3 {
z-index:1!important;
position: inherit!important;}
A.matrix-item.matrix-sheet:hover {
border: 5px solid rgba(000, 000, 000, 0.73)!important;
background-image: linear-gradient(90deg, #00C0FF 0%, #FFCF00 49%, #FC4F4F 100%);
border-radius:3px 11px 1px 11px!important;
box-shadow: 0px 200px 15px 8px rgba(000, 000, 000, 0.43)!important;
transform: matrix(1.5, 0.5, 0.2, 0.9, 0.0, 20.2)!important;
-webkit-transform: matrix(1.5, 0.5, 0.2, 0.9, 0.0, 20.2)!important;
transition:all 1.0s ease-out!important;
z-index:2!important;}
/* End 3-D animation Ning3 */