现在的位置: 首页 > 综合 > 正文

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

2013年10月23日 ⁄ 综合 ⁄ 共 2586字 ⁄ 字号 评论关闭

一.构建页面

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

抱歉!评论已关闭.