HTML CSS3中 2D、3D效果【筆記整理】

寫網頁特效的時候，涉及到2D、3D動畫效果，無論是單詞仍是一些方法及屬性，都不是很清楚，因此整理一下筆記

1、CSS3 2D轉化

CSS3 轉換能夠對元素進行移動、縮放、轉動、拉長或拉伸。

爲了兼容不一樣版本的瀏覽器，要增長前綴

 

  -webkit-transform: rotate(30deg) /* Safari and Chrome */;
  -moz-transform: rotate(30deg) /* Firefox */;
  -ms-transform: rotate(30deg) /* IE 9 */;
  -o-transform: rotate(30deg)/* opera */;
  transform: rotate(30deg);

 

transrorm的方法有：translate() rotate() scale() skew() matrix()

一、translate() 方法 根據左（X軸）和頂部（Y軸）位置給定的參數，從當前元素位置移動。

eg: translate（50px,100px）是從左邊元素移動50個像素，並從頂部移動100像素。

二、rotate() 方法 在一個給定度數順時針旋轉的元素。負值是逆時針旋轉元素。

eg: rotate(30deg) 元素順時針旋轉30度。

三、scale() 方法 該元素增長或減小的大小，取決於寬度（X軸）和高度（Y軸）的參數：

eg: scale（2,3）轉變寬度爲原來的大小的2倍，和其原始大小3倍的高度。

四、skew() 方法  

　  語法：

transform:skew(<angle> [,<angle>]);

包含兩個參數值，分別表示X軸和Y軸傾斜的角度，若是第二個參數爲空，則默認爲0，參數爲負表示向相反的方向傾斜。

• skewX(<angle>);表示只在X軸(水平方向)傾斜。
• skewY(<angle>);表示只在Y軸(垂直方向)傾斜。

五、matrix() 方法和2D變換方法合併成一個。

     maxtrix方法有個參數，包含旋轉、縮放、移動（平移）和傾斜功能。

    通常來講，原點默認爲元素的中心點，可是也能夠經過 transform-origin:50% 50%; 這裏的50% 50%表示的就是中心默認的位置。

2、CSS3 3D轉化

     transrorm屬性就是分別針對x,y,z進行設置。3d的座標系，x軸在屏幕上爲水平方向，y軸爲垂直方向，而z軸爲垂直於屏幕的方向。

　　

 

 CSS3中的3D變換主要包括如下幾個功能函數：

1. 3D位移：包括translateZ()和translate3d()；
2. 3D旋轉：包括rotateX()、rotateY()、rotateZ()和rotate3d()；
3. 3D縮放：包括scaleZ()和scale3d()；
4. 3D矩陣：matrix3d()；

　一、translateZ()和translate3d()

　　  translateZ(z) 讓元素沿着Z軸進行位移，當z爲負值的時候，元素在Z軸愈來愈遠。

translate3d(tx,ty,tz)

 

• tx：表明橫向座標位移向量的長度；
• ty：表明縱向座標位移向量的長度；
• tz：表明Z軸位移向量的長度。此值不能是一個百分比值，若是取值爲百分比值，將會認爲無效值。

　二、rotateX()、rotateY()、rotateZ()和rotate3d()

div{transform: rotateX(30deg);transform: rotateY(30deg);transform: rotateZ(30deg);}

    rotateX(30deg)是圍繞X軸進行旋轉30度，（deg）是度數。 相同的 rotateY(30deg)是圍繞Y軸進行旋轉30度，rotateZ(30deg)是圍繞Z軸進行旋轉30度。

    rotate3d(x,y,z,a) 

　  　　x（y）（z）取值爲0~1的數值，用來描述元素圍繞X（Y）（Z）軸旋轉的矢量值；　 

            a：是一個角度值，主要用來指定元素在3D空間旋轉的角度，若是其值爲正值，元素順時針旋轉，反之元素逆時針旋轉。

　三、scaleZ()和scale3d()

        即3D縮放。當scale3d()中x軸和Y軸同爲1，即scale3d(1,1,sz)，其效果等同於scaleZ(sz)。

 

    四、matrix3d()

　　matrix3d(sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1) 

3、 CSS3 過渡　

1. transition 簡寫屬性，用於在一個屬性中設置四個過渡屬性。
2. transition-property 規定應用過渡的 CSS 屬性的名稱。
3. transition-duration 定義過渡效果花費的時間。默認是 0。
4. transition-timing-function 規定過渡效果的時間曲線。默認「ease」
5. transition-delay 規定過渡效果什麼時候開始。默認是 0。

 transition-property: width;
 transition-duration: 1s;
 transition-timing-function: linear;
transition-delay: 2s;

 

　　簡寫：

transition: width 1s linear 2s;

　4、CSS3  動畫

    @keyframes規則是建立動畫。 @keyframes規則內指定一個CSS樣式和動畫將逐步從目前的樣式更改成新的樣式。當在 @keyframes 建立動畫，把它綁定到一個選擇器，不然動畫不會有任何效果。

　請用百分比來規定變化發生的時間，或用關鍵詞 "from" 和 "to"，等同於 0% 和 100%。

 

    0% 是動畫的開始，100% 是動畫的完成。

　@keyframes 規定動畫。

　animation 全部動畫屬性的簡寫屬性，除了 animation-play-state 屬性。

    animation-name 規定 @keyframes 動畫的名稱。

　animation-duration 規定動畫完成一個週期所花費的秒或毫秒。默認是 0。

　animation-timing-function 規定動畫的速度曲線。默認是 "ease"。

   animation-fill-mode 規定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式。

　animation-delay 規定動畫什麼時候開始。默認是 0。

　animation-iteration-count 規定動畫被播放的次數。默認是 1。

   animation-direction 規定動畫是否在下一週期逆向地播放。默認是 "normal"。

　animation-play-state 規定動畫是否正在運行或暫停。默認是 "running"。

@keyframes myfirst
{
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}

div
{
    animation-name: myfirst;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
}

簡化：
div
{
    animation: myfirst 5s linear 2s infinite alternate;
}

　基礎知識就到這裏，仍是須要多加練習，正所謂「熟能生巧」　。