CSS3的翻转效果

浏览数：18 / 时间：2015年06月09日

css3图片与文字3D transform切换:

　　http://www.w3cplus.com/demo/419.html

详细的CSS3属性详解：

　　http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/

总结如下：

1、需要使用到的CSS3属性

　　　　透视和视角：perspective:8000px; -------------放在舞台上（.box)

　　　　需要用到transform的3D变换，即：transform-style:preserve-3d;-------------------------放在容器上(.inner)

　　　　translateZ，Z坐标移动，这个需要与perspective搭配使用，transform:translateZ(150px) 里面的数值为舞台高度的一半

　　　　rotateX,X方向旋转----------------------刚开始去.r2进行旋转-90度使其看不见，rotate(-90deg)

html布局：

    <div class="box">
        <div class="inner">
            <div class="r1">1</div>
            <div class="r2">2</div>
        </div>
    </div>

CSS：

　　/*舞台*/
　　　　.box {
　　　　　　width: 500px;
　　　　　　height: 300px;
　　　　　　position: relative;
　　　　　　-webkit-perspective:8000px; //透视和视角
　　　　　　}
　　/*容器*/
　　　　.inner {
　　　　　　width: 100%;
　　　　　　height: 100%;
　　　　　　-webkit-transform-style:preserve-3d; //3d变换
　　　　　　transition:.6s;
　　　　}
　　/*内容*/
　　　　.r1 {
　　　　　　position: absolute;
　　　　　　width: 100%;
　　　　　　height: 100%;
　　　　　　background: red;
　　　　　　outline:5px solid #000;
　　　　　　-webkit-transform:translateZ(150px); // 里面的数值 = 舞台高度的一半
　　　　}
　　　　.r2 {
　　　　　　position: absolute;
　　　　　　width: 100%;
　　　　　　height: 100%;
　　　　　　background: yellow;
　　　　　　outline: 5px solid blue;
　　　　　　-webkit-transform:rotateX(-90deg) translateZ(150px); //里面的数值 = 舞台高度的一半，刚开始通过rotateX(-90deg)隐藏在下方
　　　　}