CSS3的翻转效果

标签：style   class   blog   c   code   http   

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

CSS3的翻转效果,布布扣,bubuko.com

CSS3的翻转效果

标签：style   class   blog   c   code   http   

原文地址：http://www.cnblogs.com/joya0411/p/3748135.html