xk星空观点

css3模块翻转效果！

试用css3非常容易就可以解决各种特效，比起js来确实是简单了不少，css3有个非常N的特效就是可以使用3D效果，至于怎么去试用css3去实现3D效果，得先学会试用2D效果，不然3D效果理解起来非常的难！

模块翻转比较好理解，用到的也部多，html结合css来看一遍基本就明白了，css里面有几句注释！

html代码:

css3代码：
body,div,ul,li {
    padding: 0;
    margin: 0;
}
 
.container{width:700px;height:auto;overflow:hidden;margin:100px auto;}
 
.container ul li {
    height: 180px;
    width: 180px;
    margin-right: 20px;
    margin-bottom: 20px;
    display: inline;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    float: left;
}
 
.out_box {
    position: relative;
    height: 180px;
    width: 180px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d; /*3D*/
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s; /*效果执行时间*/
    -ms-transition: 0.5s;
    transition: 0.5s;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden; /*背面不可见*/
}
 
.out_box div {
    display: block;
    height: 180px;
    width: 180px;
    position: absolute;
    left: 0;
    top: 0;
    background: #060;
    text-align: center;
    -webkit-backface-visibility: hidden; /*设置元素翻转后的背面对用户来说 不可见*/
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    color: #FFF;
    line-height: 180px;
    font-size: 16px;
}
 
.out_box .front_box {
    z-index: 2;
}
 
.out_box .back_box {
    z-index: 1;
    -webkit-transform: rotateY(180deg); /*一开始就设置翻转后看见的那个元素 设置为翻转后的效果*/
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
 
.container ul li:hover .out_box {
    -webkit-transform: rotateY(180deg); /*效果开始，直接翻转父元素使两个子元素都同时翻转*/
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
 
.container ul li:hover .back_box {
    z-index: 3;
}