CSS3之3D变换实例详解

CSS3的3D效果很赞，本文实现简单的两种3D翻转效果。首先看效果和源代码，文末是文绉绉的总结部分^_^

以下CSS代码为了简洁没有添加前缀，请视情况自行添加（自动化时代推荐使用其他的一些方法，如gulp-autoprefixer插件，因为本人更喜欢gulp #_#）

还有w3school上面的这句话早已经过时：

 

目前为止，现代浏览器基本都支持无前缀的3D变换的相关属性（除了IE，以及Safari9的backface-visibility仍需加前缀-webkit，还有其他浏览器的一些小问题）

可以通过Can I use网站查看各浏览器对该CSS3属性的支持情况：

 

听说现在流行先看效果和代码再解释？

（1）效果一

 

 

HTML代码：

<div class='stage'>
    <div class='container'>
        <div class='front'></div>
        <div class='back'></div>
    </div>
</div>        

View Code

CSS代码：

.stage{
    width: 140px;
    height: 200px;
    perspective: 800px;
}
.container{
    position: relative;
    width: 140px;
    height: 200px;
    transform-style: preserve-3d;
    transition: 1s;
}
.front{
    position: absolute;
    width: 140px;
    height: 200px;    
    background-image: url('http://d3.freep.cn/3tb_160824110159xh65572240.jpg');
    background-size: cover;
    backface-visibility: hidden;
}
.back{
    position: absolute;
    width: 140px;
    height: 200px;
    background-image: url('http://d3.freep.cn/3tb_160824110159262h572240.jpg');
    background-size: cover;
    transform: rotateY(180deg);    
    backface-visibility: hidden;        
}
.stage:hover .container{
    transform: rotateY(180deg);
}

View Code

 

（2）效果二

效果链接：  http://codepen.io/FEwen/pen/kXOXpJ

HTML代码：

<ul class="wrap">
    <li class="stage">
        <div class='container'>
            <div class="front"><img src="http://d3.freep.cn/3tb_160824132644ihf4572240.jpg" /></div>
            <p class="back">帅气的胡歌</p>
        </div>
    </li>
    <li class="stage">
        <div class='container'>
            <div class="front"><img src="http://d2.freep.cn/3tb_160824132644w0r4572240.jpg" /></div>
            <p class="back">美腻的赵丽颖</p>
        </div>
    </li>
    <li class="stage">
        <div class='container'>
            <div class="front"><img src="http://d3.freep.cn/3tb_160824235542tkj9572240.jpg" /></div>
            <p class="back">清纯的刘亦菲</p>
        </div>
    </li>
</ul>            

View Code