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