一、2D轉換(transform)
CSS3中的transform轉換和PS中的變換是一樣的,分別有:縮放、位移、斜切、旋轉
1.1 transform:scale()縮放
transform:scale(w,h); 寬度和高度,w,h都是填寫縮放的倍數,沒有單位,比如1.5就是放大1.5倍,1是默認的倍數,0.5縮小,還可以為負數(倒着縮放) |
語法:
transform:scale(1.5,2.0); |
上面這句話等價於:
transform:scaleX(1.5); 寬度 transform:scaleY(2.0); 高度 |
1.2 transform:translate()位移
transform:translate(x,y); X和Y的單位可以是px或% |
transform:translate(100px,200px); |
上面這句話等價於:
transform:translateX() transform:translateY() |
說明:
X移動的X軸 Y移動的Y軸 |
注意:移動的位置是相對於自己原來的位置進行移動,如果Y軸不寫,默認是0。
transform:translate(50%,50%); 移動自己盒子寬高的一半 transform:translate(150px,100px); 從當前位置X軸向右移動150px,Y軸向下移動100px transform:translate(-150px,-100px); 從當前位置X軸向左移動150px,Y軸向上移動100px |
1.3 transform:skew()斜切
transform:skew(x,y); X和Y軸的單位是deg,值可以為負數 |
transform:skew(30deg,20deg); |
等價於:
transform:skewX(30deg); transform:skewY(20deg) |
說明:
X相對於X軸的斜切角度 Y相對於Y軸的斜切角度 |
如果只寫X軸,Y軸省略不寫,則Y默認是0。
1.4 transform:rotate()旋轉
transform:rotate(360deg); |
上面這句話等價於:
transform:rotateZ(); |
描述:旋轉角度用deg單位表示,具體多少度,可以任意填寫。
transform:rotate(90deg); 按順時針旋轉90度 transform:rotate(-90deg); 按逆時針旋轉90度 |
1.5組合使用
注意:如果有多個轉換效果,每個轉換效果用空格隔開。
二、設置轉換中心點
設置元素轉換的時候有中心點,圍繞着中心點來變換,默認圍繞z軸中間轉換。
transform-origin:x y; |
如果只寫X軸,Y軸默認是center。
X和Y軸的參數,可以是px、%單位,還可以是left、top、right、bottom、center |
三、3D轉換(transform)
3D其實就是X、Y、Z三個軸進入到3D空間展示,不在水平面上。
3.1 transform:rotateX()
transform:rotateX(); 圍繞着X軸進行旋轉 |
transform:rotateX(360deg); |
3.2 transform:rotateY()
transform:rotateY(360deg); 圍繞着X軸進行旋轉 |
3.3 transform:translateZ()
transform:translateZ(); |
沿着Z軸進行移動,往自己朝向的前后方向移動,近大遠小。
3.4 transform-style
transform-style:preserve-3d;規定子元素如何在3D空間中顯示(將所有子元素都進入3D空間中呈現) |
注意:要做3D效果必須加這個屬性,而且要給父級加,加上后子元素才能有3D效果。
3.5透視
近大遠小(值越大就越近,值越小就越遠)
語法:
perspective:length; 設置透視的值,單位px,范圍:1px~無窮大 |
perspective-origin:x y; 設置透視的消失點,x y的值可以是px、%或left、right、top、bottom。 |
默認不寫就是center。
注意:透視要給父級元素加,子元素加3D變換效果。
3.6背面隱藏
backface-visibility: hidden; 屬性定義當前元素不面向屏幕時是否可見 |
如果在翻轉元素不希望看到其背面, 該屬性就可以隱藏。
四、CSS3 animation動畫
通過 CSS3,我們能夠創建動畫,這可以在許多網頁中取代動畫圖片、Flash 動畫以及 JavaScript。
什么是 CSS3 中的動畫?
動畫是使元素從一種樣式逐漸變化為另一種樣式的效果。
您可以改變任意多的樣式任意多的次數。
請用百分比來規定變化發生的時間,或用關鍵詞 "from" 和 "to",等同於 0% 和 100%。
0% 是動畫的開始,100% 是動畫的完成。
為了得到最佳的瀏覽器支持,您應該始終定義 0% 和 100% 選擇器。
CSS3動畫分為兩部分組成:定義、調用
第一步:【定義動畫】
@keyframes 動畫名稱{ from{} to{} } |
@keyframes 動畫名稱{ 0%{} 100%{} } |
第二步:【調用動畫】
animation:動畫名稱 花費時間 運動曲線 何時開始 播放次數 輪流逆向播放 保持最終狀態 |
infinite 無限循環播放,播放次數可以是純數字,或者無限循環 alternate 輪流逆向播放 forwards 保持最終狀態(停留在最后一種狀態,不能和infinite共存) |
animation:move 2s linear 1s 3 infinite alternate forwards; |
前面兩項必須寫,后面的參數是可選的。
animation-play-state:paused; 動畫暫停屬性 |
注意:如果項目中需要兼容所有低版本瀏覽器,請加上瀏覽器前綴。
HTML5和CSS3中還有一些新的東西,我們會在移動端里面進行補充