CSS3干货5：CSS中3D运用-2

最近突然(￣︶￣)↗ 涨了20几个粉丝，开心。

加上今天把重（gai）要（si）的工作完成了，更开心了。

就继续写篇有关CSS 3D的文章。算是上一篇的补充吧。>>戳这里看上一篇<<

先看效果：

对，就是做一个类似翻牌的效果。有没有当皇帝，翻妃子牌的感觉？呃。。偏题了。。。

这里用到的主要技术就是上一篇提到的：

transform 变化，perspective 透视，transition 过渡动画，以及 伪标签

HTML结构：

     

         
     
    

        
            查看详细
        
    

一个大box，里包裹了两部分内容。考虑到结构拓展的需要，这两部分，我都使用了div标签。

CSS

a{
    text-decoration: none;
}
.box{
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;

    position: relative;  /* 相对定位 */
    width: 242px;
    height: 300px;
    perspective: 500px;
}
.box_img,
.box_info{
    position: absolute;  /* 绝对定位，让正反面能叠在一起 */
    left: 0;
    right:0;
    top: 0;
    bottom:0;
    transition: all 1s;
    backface-visibility: hidden;  /* 关键样式：标签翻转后，背部不可见！ */
}
.box_img{
    z-index: 10;  /* 关键样式：把图片部分的层级提高，否则 反面的按钮文字translate后，会穿透过来。 */
}


.box_info a{
    display: block;
    height: 100%;
    width: 100%;
    text-align: center;
    background: #440fe2;
    color: #fff;
}

.box_info{
    transform: rotateY(-180deg);   /*把文字翻过来，-180deg，背部对着我们*/
    transform-style: preserve-3d;  /* 让子标签的变形有3d感
                                     这里主要是 span 标签 */
}

.box_info  span{
    top: 50%;
    left: 50%;
    width: 120px;
    height: 40px;
    margin-top: -40px;
    margin-left: -60px;
    line-height: 40px;
    display: block;
    font-size: 16px;
    border-radius: 5px;
    background: #FF6600;
    position: absolute;
    transition:all 0.5s;
    transform: translateZ(50px);  /* 让按钮文字有立体感，让它离开蓝色背景 */
    transform-style: preserve-3d;  /* 让子标签的变形有3d感
                                   这里主要是 :after 伪标签*/
}
.box_info  span:after{
    content: "";
    top: 50%;
    left: 50%;
    width: 120px;
    height: 40px;
    margin-top: -40px;
    line-height: 40px;
    display: block;
    font-size: 16px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.5);
    box-shadow:0 0 10px rgba(0, 0, 0, 0.5);
    transform: translateZ(-50px);  /* 让投影贴在蓝色背景上 */
}

/* 当鼠标移动到 box 上的时候 ：*/
.box:hover .box_img{
                                 /* box_info 之前是翻转了 -180deg */
    transform: rotateY(180deg);   /* 一个正方向，一个就为负方向*/
}
.box:hover .box_info{         /* 把背面摆正 */
    transform: rotateY(0deg);
}
.box_info a:active span{
    transform: translateZ(0);  /*超链接按下，span回到初始位置*/
}

因为有了注释，这里就不分析了。各位看官，有问题，可以留言。

啰嗦一个 样式：

backface-visibility ：hidden；

   主要配合 transform的 rotate 翻转 使用。 当背面朝我们的时候，背面不可见。