CSS3 transform屬性 附上demo

參考http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/

• 用法
• 實例

 

剛開始使用這個屬性是因為工作的需要，制作H5動畫頁面，通過查具體用法也可以制作出各種小動畫，比如平移，縮放，翻動，剛開始看到這些動畫都很驚奇，居然短短寫一小段東西就就可以完成js寫一堆代碼的動畫了，然后看到別人家的CSS3動畫，再次被教育做人了。

下面說說怎么使用

transform

定義 ：transform 屬性向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。

語法 : transform: none|transform-functions;

具體參考W3C : http://www.w3school.com.cn/cssref/pr_transform.asp

一般可以通過添加

-webkit-transform:matrix(n,n,n,n,n,n)

-o-webkit-transform:matrix(n,n,n,n,n,n)

-moz-webkit-transform:matrix(n,n,n,n,n,n)

這類前綴可以解決部分低版本瀏覽器兼容問題

在這些屬性中transform:perspective(n)這個屬性在3D變換中是比較重要的

perspective

定義和用法 : perspective 屬性定義 3D 元素距視圖的距離，以像素計。該屬性允許您改變 3D 元素查看 3D 元素的視圖。

當為元素定義 perspective 屬性時，其子元素會獲得透視效果，而不是元素本身。

注釋：perspective 屬性只影響 3D 轉換元素。

視距 我理解的就是 你的眼睛在屏幕上方,定義perspective的元素距離屏幕的距離就是 視距

translateZ

當定義好perspective的時候，通過使用translateZ可以更好的把握。通過定義translateZ（n px） 的值 觀察元素距離你視覺焦點的遠近

通過改變translateZ的值，改變該元素與你的距離，translateZ大與你的距離越近，看到的越大

當translateZ>perspective時，元素看不到 因為你已經越過 該元素 了

transform-style

定義和用法 : transform-style 屬性規定如何在 3D 空間中呈現被嵌套的元素。

注釋：該屬性必須與 transform 屬性一同使用。

設置transform-style:preserve-3d屬性，可以使元素有3D的顯示效果

Demo

通過參考，回旋木馬的例子，本實例在此基礎上寫一個立體的回旋立方體。

 <div id='group1'>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
        </div>

 

通過設置每個p的rotate形成立方體，然后計算好立方體的長寬高 通過translateZ確定立方體形狀

 #groups1{
                position:relative;
                transform-style:preserve-3d;
                width:100%;
                height:300px;
                margin-top:100px;
                transition:transform 1s;
            }
        p:nth-child(1){
            transform:rotateY(0deg) translateZ(150px);
        }
        p:nth-child(2){
            transform:rotateY(90deg) translateZ(150px);
        }
        p:nth-child(3){
            transform:rotateY(180deg) translateZ(150px);
        }
        p:nth-child(4){
            transform:rotateY(270deg) translateZ(150px);
        }
        p:nth-child(5){
            transform:rotateX(90deg) translateZ(150px);
        }
        p:nth-child(6){
            transform:rotateX(270deg) translateZ(150px);
        }

 

通過js改變元素的Rotate的值，再通過定時 每隔1s改變一次 ，使立方體轉起來

var transRotateX=function(){
                var degNum=_randomNum()*deg,
                    rota=parseInt(rotateX)+parseInt(degNum);

                ele.style.transform='rotateX('+rota+'deg)';
                rotateX=_validate(ele.style.transform);
                countX++;
            },
                transRotateY=function(){
                var degNum=_randomNum()*deg,
                    rota=parseInt(rotateY)+parseInt(degNum);

                ele.style.transform='rotateY('+rota+'deg)';
                rotateY=_validate(ele.style.transform);
                countY++;
            },

 

由於最近剛開始學習git的用法，以及js的各種寫法，模塊化之類，所以代碼可能寫的不夠簡潔優雅，不過通過一次一次練習，總會好的嘛~

 

附上代碼GitHub地址:https://github.com/xshaobaozi/transform3D