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(宽度的一半)