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

一.构建页面

立方体六个面，完全不用事先设置好，只不过是为了配合后面的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的长方体的效果，用这个方法是没有用的，即使你设置对了参数，因为你旋转的时候可能造成各个面之间会有分开的感觉，毕竟是模拟，他不是真的。