CSS3視角3D動畫

Question

鼠標懸停後，如何建立一個純粹的CSS3 3D透視翻轉動畫....

？例如：http://themeforest.net/item/decadence-minimal-html5-light-mobile-version/full_screen_preview/2036310

是否有jQuery代碼也... 。請清除我，以及如何可以通過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; 
}