CSS3的翻转效果

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)隐藏在下方
　　　　}

　　/*交互*/

　　　　.inner:hover {
　　　　　　-webkit-transform: rotateX(90deg);   //让r2出现
　　　　}

 

 

如果需要左右翻转，只需要更改rotateX为rotateY，translateZ(宽度的一半)

 

 

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

另一种翻转效果，结构不变，样式如下：

        .box {
            width: 300px;
            height: 300px;
            -webkit-perspective:8000px;  /*设置舞台：透视和视角*/
            position: relative;
        }
        .inner {
            width: 100%;
            height: 100%;
            -webkit-transform-style:perserve-3d; /*设置场景：3d变换*/
            
        }
        .inner div{
            position: absolute;  /*绝对定位：使正面和反面全部重合*/
            top:0;
            left:0;
            width: 100%;
            height: 100%;
            border-radius:50%;
            text-align: center;
            line-height: 300px;
            -webkit-backface-visibility:hidden;   /*背面隐藏*/
        }
        .r1 {
            background: red;
            -webkit-transition:1.5s;        /*设置动画*/
        }
        .r2 {
            background: yellow;
            -webkit-transform:rotateY(180deg);   /*刚开始，背面隐藏*/
            -webkit-transition:1.5s;
            
        }
        .inner:hover .r1{
            -webkit-transform:rotateY(180deg);  /*翻转后，正面隐藏,反面出现*/
            
        }
        .inner:hover .r2 {
            -webkit-transform:rotateY(0deg);
            
        }

http://jsbin.com/muxal/2/edit

 

原理：

　　1、设置舞台和场景

　　2、使用绝对定位使正面和反面的div重合，让正面和反面的背面都隐藏，即：backface-visibility：hidden

　　3、让反面的旋转180deg先隐藏掉，当hover时，正面隐藏（旋转180deg），反面出现（旋转到0）