未命名  

檔案下載: 39326269

2012083014431464  

 

1、3D試圖

  transform-style:flat(默認,二維效果) / preserve-3d(三維效果)。設置一個元素的transform-style:preserve-3d;只影響這個元素的子元素(如果孫元素也有3d效果,那麼還必須给子元素設置preserve-3d)。這样所有子元素都可以相對與父元素的平面進行3d變形操作。和二維變形一样,三維變形可以使用transform屬性來設置。可以通過制定的函數或者通過三維矩陣來對元素變型。列舉幾個函數:

  translate3d(x,y,z) 使元素在這三個緯度中移動,也可以分開寫,如:translateX(length),translateY(length), translateZ(length)。注意z軸的值只能为px;

  scale3d(number,number,number) 使元素在這三個緯度中縮放,也可分開寫,如:scaleX(),scaleY(),scaleY()。

  rotateX(angle) 是元素依照x軸旋轉;

  rotateY(angle) 是元素依照y軸旋轉;

  rotateZ(angle) 是元素依照z軸旋轉。

2、透視/景深效果

  perspective(length) 为一個元素設置三維透視的距離。僅作用於元素的後代,而不是其元素本身。當perspective:none/0;時,相當於沒有設perspective(length)。

你要建立一個小立方體,長寬高都是200px。如果你的perspective < 200px ,那就相當於站在盒子裏面看的結果,如果perspective 非常大那就是站在非常遠的地方看(立方體已經成了小正方形了)。

 

  當元素沒有設置perspective(length)時,所有後代元素被壓縮在同一個二維平面上,不存在景深的效果。如果設置perspective(length)後,將會看到三維的效果。默認的透視視角中心在容器(是perspective所在的元素,不是他的後代元素)的中點,也就是perspective-origin: 50% 50%。當然你也可以自己設置,比如:左上角-webkit-perspective-origin: 0px 0px;。

  綜合以上兩點,我們可以通過幾個實例,來深入了解下perspective(length);  和  transform-style:preserve-3d;

   (1)當設置perspective(length);不設置transform-style:preserve-3d;當元素靜止時,會有立體的效果:

2012083015372675  

   (2)當設置perspective(length);不設置transform-style:preserve-3d;當元素旋轉時的效果:

      

2012083015413019  

   (3)當設置transform-style:preserve-3d;不設置perspective(length);當元素靜止時,不會有立體的效果。

2012083015423269  

   (4)當設置perspective(length);不設置transform-style:preserve-3d;當元素旋轉時的效果:

2012083015430844     (5)只有當兩個值都設置,不管是靜止還是旋轉,都會看到立體的效果。

注意:(1)如果一個元素以x軸或y軸旋轉90度以上的話,那麼它的背面將面向用戶。背面的元素始終是透明的,所以用戶通過後面看到正面的反向形態,就像是從在玻璃門後面看對外張貼的標志。为了防止顯示鏡像的前面。可以將-webkit-backface-visibility設置为hidden;如果-webkit-backface-visibility:hidden;那麼這個元素就不會在背面可見了。這麼做的一個原因就是,想一個元素有兩個面,就像一個撲克牌。比如:創建一張撲克牌,正面和背面一定不一样,這兩個面的位置是背靠背的。這兩個元素一起轉動,正面逐步向後反轉隱藏,同時背面向前反轉並出現。如果背面的元素是可見的,旋轉時它將掩蓋它底下的元素,而不是露出它下面的元素。

   (2)如果父元素設置overflow:hidden;那麼子元素就無法跳出父元素的平面,也就不能出現3D效果。就如同,transform-style:flat;

最後,把我寫的小例子分享给大家(此例子僅是基於-webkit-內核,如不能觀看效果,建議換成chrome瀏覽器)。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>3D立方體</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta name="author" content="翻越這牆">
<style type="text/css">
/*重置{*/
* { padding: 0; margin: 0; }img{border:0;}li{list-style:none;}
/*}重置*/
ul{width:200px;height:200px;margin:100px auto;position:relative;-webkit-transform-style:preserve-3d;}    
    /*如果在ul裏設置:-webkit-perspective:400px;-webkit-perspective-origin:0% 50%; 則會有透視、景深的效果*/
li{width:200px;height:200px;position:absolute;text-align:center;line-height:200px;font-size:80px;font-weight:bold;color:#fff;}
li:nth-child(1){background:rgba(255,0,0,1);-webkit-transform:rotateX(90deg)   translateZ(100px);}
li:nth-child(2){background:rgba(0,255,255,1);-webkit-transform:rotateX(270deg)  translateZ(100px);}
li:nth-child(3){background:rgba(255,0,255,1);-webkit-transform:rotateY(90deg) translateZ(100px);}
li:nth-child(4){background:rgba(0,255,0,1);-webkit-transform:rotateY(270deg) translateZ(100px);}
li:nth-child(5){background:rgba(200,200,0,1);-webkit-transform:translateZ(-100px);}
li:nth-child(6){background:rgba(0,0,255,1);-webkit-transform: translateZ(100px) ;}
.button{width:200px;margin:20px auto;position:relative;}
input{width:50px;height:30px;position:absolute;cursor:pointer;}
input:nth-child(1){left:100px;top:0;}
input:nth-child(2){left:200px;top:50px;}
input:nth-child(3){left:0px;top:50px;}
input:nth-child(4){left:100px;top:100px;}
input:nth-child(5){left:100px;top:50px;}
        /*****當執行下列css時,立方體無限自由旋轉******/
/* ul{-webkit-animation:run 5s linear infinite ;}    
@-webkit-keyframes run{
    0%{-webkit-transform: rotateX(0deg) rotateY(0deg) }
    100%{-webkit-transform:rotateX(360deg)  rotateY(360deg)  }
}
*/
</style>
</head>
<body>
    <ul id="ul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <div class="button">
        <input type="button" value="上">
        <input type="button" value="右">
        <input type="button" value="左">
        <input type="button" value="下">
        <input type="button" value="重置">
    </div>
<script type="text/javascript">
<!--
    var ul=document.getElementById('ul');
    var inputs=document.getElementsByTagName('input');
    var x=0,y=0;
    /////////////////////////鼠標控制
    for(var i=0;i<inputs.length;i++){
        inputs[i].onclick=run;
    }
    function run(){
        ul.style.webkitTransition='-webkit-transform 3s linear';  //設置立方體變換的屬性、持續時間、動畫類型
        if(inputs[0]==this){x+=90;}
        if(inputs[1]==this){y+=90;}
        if(inputs[2]==this){y-=90;}
        if(inputs[3]==this){x-=90;}
        if(inputs[4]==this){x=0;y=0; ul.style.webkitTransition='-webkit-transform 0.1s linear';}    //當點擊重置按鈕時,迅速轉回到初始狀態。
        ul.style.webkitTransform = "rotateX("+x+"deg) rotateY("+y+"deg)";    //變換效果(沿X軸和Y軸旋轉)
    }    
    ////////////////////////鍵盤控制    
    document.addEventListener('keydown', function(e){
        ul.style.webkitTransition='-webkit-transform 3s linear';
        switch(e.keyCode){
            case 37:    y -= 90;    //左箭頭
                        break;
            case 38:    x += 90;    //上箭頭
                        break;
            case 39:    y += 90;    //下箭頭
                        break;
            case 40:    x -= 90;    //右箭頭
                        break;
            case 13:    x=0; y=0;    //回車 (當回車時,迅速轉回初始狀態)
                        ul.style.webkitTransition='-webkit-transform 0.1s linear';
                        break;
        }
        ul.style.webkitTransform = "rotateX("+x+"deg) rotateY("+y+"deg)"; //變換效果(沿X軸和Y軸旋轉)
    }, false);
//-->
</script>
</body>
</html>

如有不妥之處,還請各位大神們指點!!!

 


From:CNBLOGS
創作者介紹
創作者 shadow 的頭像
shadow

資訊園

shadow 發表在 痞客邦 留言(0) 人氣()