css3 transition cube(立方体翻转效果)

一.构建页面

<div class="container perspective">                <div class="transition effect1 card">                    <div class="cube-front  front"><img src="../assets/1.jpg"/></div>                    <div class="cube-top  back"><img src="../assets/2.jpg"/></div>                    <div class="cube-bottom back"><img src="../assets/3.jpg"/></div>                    <div class="cube-right back"><img src="../assets/4.jpg"/></div>                    <div class="cube-left back"><img src="../assets/5.jpg"/></div>                    <div class="cube-back back"><img src="../assets/1.jpg"/></div>                </div>            </div>

立方体六个面，完全不用事先设置好，只不过是为了配合后面的CSS，可以用程序来控制其位置，用"三面法"就能做

每个立方体面对应的CSS如下

.effect1 .cube-front,.effect2 .cube-front{-webkit-transform:scale3d(.8,.8,.8) translate3d(0,0,212px);}.effect3 .cube-front,.effect4 .cube-front{-webkit-transform:scale3d(.8,.8,.8) translate3d(0,0,164px);} .cube-back{-webkit-transform:scale3d(.8,.8,.8) rotate3d(1,0,0,-180deg) translate3d(0,0,164px);}.cube-top{-webkit-transform:scale3d(.8,.8,.8) rotate3d(1,0,0,90deg) translate3d(0,0,212px);} .cube-bottom{-webkit-transform:scale3d(.8,.8,.8) rotate3d(1,0,0,-90deg) translate3d(0,0,212px);}.cube-right{-webkit-transform:scale3d(.8,.8,.8) rotate3d(0,1,0,90deg) translate3d(0,0,164px);}.cube-left{-webkit-transform:scale3d(.8,.8,.8) rotate3d(0,1,0,-90deg) translate3d(0,0,164px);}

值得注意的是 .cube-front这个面，由于你上下翻动和左右翻动所对应的轴偏移量是不一样的（上下是212px=height/2,左右翻动是164=width/2）

而且还要值得注意的是，当左右和上下滚动切换的时候，图片大小会有变化，这个是由于在设置了perspective,这样的情况下，z的正偏移量越大，则图像就越大，就如上面说的，轴偏移量不同，所以导致图片大小会有所不同，如果说要完全处理掉这个问题的话，则需要在scale3d上做下功夫了，具体的比例公式还不清楚，就一个个试吧，比较常用的是0.825,0.858的scale比例

二.cube css3 翻转效果

/***************** Cube1 ********************/.effect1.show{-webkit-animation: cube1 0.5s ease-in-out;}@-webkit-keyframes cube1{0% { -webkit-transform: rotate3d(1,0,0,0); }100% { -webkit-transform: rotate3d(1,0,0,-90deg); }}/***************** Cube2 ********************/.effect2.show{-webkit-animation: cube2 0.5s ease-in-out;}@-webkit-keyframes cube2{0% { -webkit-transform: rotate3d(1,0,0,0); }100% { -webkit-transform: rotate3d(1,0,0,90deg); }}/***************** Cube3 ********************/.effect3.show{-webkit-animation: cube3 1s ease-in-out;}@-webkit-keyframes cube3{0% { -webkit-transform: rotate3d(0,1,0,0); }40% { -webkit-transform: rotate3d(0,1,0,-100deg); }60% { -webkit-transform: rotate3d(0,1,0,-84deg); }80% { -webkit-transform: rotate3d(0,1,0,-90deg); }95% { -webkit-transform: rotate3d(0,1,0,-88deg); }100% { -webkit-transform: rotate3d(0,1,0,-90deg); }}/***************** Cube4 ********************/.effect4.show{-webkit-animation: cube4 0.5s ease-in-out;}@-webkit-keyframes cube4{0% { -webkit-transform: rotate3d(0,1,0,0); }100% { -webkit-transform: rotate3d(0,1,0,90deg); }}

此外值得一提的是这个是伪立方体的效果，并不是真正的立方体效果，比如说要做长宽高为500，100，80的长方体的效果，用这个方法是没有用的，即使你设置对了参数，因为你旋转的时候可能造成各个面之间会有分开的感觉，毕竟是模拟，他不是真的。