CSS3 перспектива 3d анимация

Question

Как создать чистый CSS3 3D перспективе покадровой анимации после наведению мыши ....

Пример: http://themeforest.net/item/decadence-minimal-html5-light-mobile-version/full_screen_preview/2036310

ли это иметь Jquery код также ... .please очистить меня и как можно создать с помощью CSS3 или Jquery ....

Answer 1

Это CSS только плагин с именем 3drollovers.css

Demo и Source Code

См Flipbox demo, его соответствием данного сайта.

CSS

.rollover { 
    position: relative; 
    width: 265px; 
    height:265px; 
    display: block; 
    float:left; 
} 
.short{ 
    width:100px; 
    height:100px; 
} 
.front { 
    z-index: 2; 
    position: absolute; 
    background: #fff; 
} 
.back { 
    z-index: 1; 
    position: absolute; 
} 
.rollover:hover .back, 
.rollover:focus .back { 
    z-index: 2; 
} 
.rollover:hover .front, 
.rollover:focus .front { 
    z-index: 1; 
} 
.fade .rollover .front { 
    opacity: 1; 
    -webkit-transition: 1s; 
    -moz-transition: 1s; 
     -ms-transition: 1s; 
     -o-transition: 1s; 
      transition: 1s; 
} 
.fade .rollover .back { 
    opacity: 0; 
    -webkit-transition: 1s; 
    -moz-transition: 1s; 
     -ms-transition: 1s; 
     -o-transition: 1s; 
      transition: 1s; 
} 
.fade .rollover:hover .front, 
.fade .rollover:focus .front { 
    opacity: 0; 
} 
.fade .rollover:hover .back, 
.fade .rollover:focus .back { 
    opacity: 1; 
} 
.flip .rollover { 
    -webkit-perspective: 800px; 
    -moz-perspective: 800px; 
     -ms-perspective: 800px; 
     -o-perspective: 800px; 
      perspective: 800px; 
} 
.flip .cube { 
    height: 265px; 
    width: 265px; 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
     -ms-transform-style: preserve-3d; 
     -o-transform-style: preserve-3d; 
      transform-style: preserve-3d; 
    -webkit-transform: rotateX(0) rotateY(0) rotateZ(0); 
    -moz-transform: rotateX(0) rotateY(0) rotateZ(0); 
     -ms-transform: rotateX(0) rotateY(0) rotateZ(0); 
     -o-transform: rotateX(0) rotateY(0) rotateZ(0); 
      transform: rotateX(0) rotateY(0) rotateZ(0); 
    -webkit-transition: 1s; 
    -moz-transition: 1s; 
     -ms-transition: 1s; 
     -o-transition: 1s; 
      transition: 1s; 
} 
.flip .front { 
    -webkit-transform: translate3d(0,0,1px); 
    -moz-transform: translate3d(0,0,1px); 
     -ms-transform: translate3d(0,0,1px); 
     -o-transform: translate3d(0,0,1px); 
      transform: translate3d(0,0,1px); 
} 
.flip .back { 
    -webkit-transform: rotateY(180deg) translate3d(0,0,0); 
    -moz-transform: rotateY(180deg) translate3d(0,0,0); 
     -ms-transform: rotateY(180deg) translate3d(0,0,0); 
     -o-transform: rotateY(180deg) translate3d(0,0,0); 
      transform: rotateY(180deg) translate3d(0,0,0); 
} 
.flip .rollover:hover .cube, 
.flip .rollover:focus .cube { 
    -webkit-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
     -ms-transform: rotateY(180deg); 
     -o-transform: rotateY(180deg); 
      transform: rotateY(180deg); 
} 
.box .front { 
    -webkit-transform: translate3d(0,0,80px) scale(0.9,0.9); 
    -moz-transform: translate3d(0,0,80px) scale(0.85,0.85); 
     -ms-transform: translate3d(0,0,80px) scale(0.85,0.85); 
     -o-transform: translate3d(0,0,80px) scale(0.85,0.85); 
      transform: translate3d(0,0,80px) scale(0.85,0.85); 
} 
.box .back { 
    -webkit-transform: rotateY(180deg) translate3d(0,0,80px) scale(0.9,0.9); 
    -moz-transform: rotateY(180deg) translate3d(0,0,80px) scale(0.85,0.85); 
     -ms-transform: rotateY(180deg) translate3d(0,0,80px) scale(0.85,0.85); 
     -o-transform: rotateY(180deg) translate3d(0,0,80px) scale(0.85,0.85); 
      transform: rotateY(180deg) translate3d(0,0,80px) scale(0.85,0.85); 
} 

Answer 2

Что-то вроде http://jsfiddle.net/aHUuw/ Это может быть сделано только с помощью CSS, вам нужно настроить его под свои нужды. Это наиболее важные части:

.container { 
    perspective: 500px; 
} 

.container:hover .flipper { 
    transform-origin: top left; 
    transform: rotateY(60deg); 
    transition: transform 250ms ease; 
}