css3 過渡和2d變換-css教學-PHP中文網

首頁

web前端

css教學

css3 過渡和2d變換

高洛峰

Feb 09, 2017 pm 04:36 PM

css3

1.transition
　　語法：transition: property duration timing-function delay;
　　　　　　　〜屬性　　語法： transition-property: none | all | property
　　　　　　　　　　　　none 沒有屬性會獲得過度效果
　　　　　　　　　　　　all 所有屬性都將獲得過度效果。
　　　　　　　　　　　　property 定義應用過度效果css 屬性名稱列表，列表以逗號分割。
　　　　　　　　　　　　indent 元素屬性名稱
　　　　　　transition-duration　：時間;
　　　　　　　　　　　　time 規定完成過渡效果所需的花費的時間。預設值是0，表示不會有效果
　　　　　　transition-timing-function 規定速度效果的速度曲線。
　　　　　　　　語法： transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,); 規定以相同速度開始至結束的過度效果。
　　　　　　　　　　　　ease 規定慢速度開始，然後邊快，然後慢速度結束。
　　　　　　　　　　　　ease-in 規定以慢速度開始的過度效果。
　　　　　　　　　　　　ease-out 規定以慢速度結束的過度效果。
　　　　　　　　　　　　ease-in-out 規定以慢速度開始和結束的過渡效果。
　　　　　　　　　　　　cubic-bezier(n,n,n,n) 在cubic-bezier中定義自己的值，可能的值是0至１之間的數值。
　　　　　 transition-delay　　定義過度效果何時開始
　　　　　　　　語法：transiti　y: 條件;開始之前需要等待的時間。

　　　　　範例：
　　　　　　

　　　　　　　　　　.box:hover{ background:blue;width:300px;height:150px;}

　　　　　　結果：如圖

　　　　　塞爾曲線）
　　　　　　　　

　　　　結果：如圖

　　　　　　　　

　　　　　　　　　、　　、　、　　　　〟　〟〟〟　〟〟〟〟〟〟〦　〟〦　）　　　　　.box{width:100px;height:100px;background:red; transition:1swidth,2s height,3s background; }
　　　　　　　　.box:hover{width:300px;height:150px;background:blue;}
　　　　　　　㟀、〜。、、、、》、》、》》》》》、》》》》、》》》〕　》〕　〕〕〕、〕、〕、〕〕〕〕〕〕　)s|　　　　結果：如圖

css3 过渡和2d变换

2 .transform

　　　　字母上就是變形，改變的意思，在css3中transform主要包括一下幾種，旋轉rotate,skew,縮放scale和移動translate 以及矩陣變形matrix
　one:trans　　語法變形[ ]*
　　　　　　　　　　也就是： transform: rotate | scale | skew | translate |man; ；表示一個或多個變換函數，以空格分開；
　　　　　　　　　　　　rotate,scale,translate 三種，但這裡需要提醒大家的，以往我們疊加效果都是用逗號（“，”）

　　　　　　　　　　　　但transform中使用多個屬性時卻需要有空格隔開。大家記住了是空格隔開。

　　　　　　　　　　旋轉rotate
　　　　　　　　　　　　　　　　　　〔　　　　　　　　　　　　　　　　　　〔　　　　　　　　　　　〔2　　　　　　　　〪　　　　　　　　〕
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　『設定的值為負數，則表示逆時針旋轉。
　　　　　　　　　　　　　　如：transform:rotate(30deg):
　　　　　　　　　　　移動translate我們分為三種情況：translate(x,y)水平方向和垂直方向同時移動（也就是X軸和Y軸同時移動）；translateX( x)僅水平方向移動（X軸移動translateY(Y)僅垂直方向移動（Y軸移動）

　　　　　　　　　　縮放scale🎀　　　　　　縮放scale🀀　　　　　　〴：scale(x,y)使元素水平方向和垂直方向同時縮放（也就是X軸和Y軸同時縮放）；scaleX(x)元素僅水平方向縮放（X軸縮放）；

　　　　　　　　　　　　　　　　　ale　　　　　　　　）（），但它們有相同的縮放中心點和基數，

　　　　　　　　　　　　其中心點就是元素的中心位置，縮放基數為1，如果其值大於1　元素就放大，反之（　　　〜　〜　　其。　　　扭曲skew
　　　　　　　　　　　　　扭曲skew和translate,secale skew(x,y)使元素在水平和垂直方向同時扭曲（X軸和Y軸同時按水平的角度值進行扭曲元素值進行扭曲 (變形（X軸扭曲變形）；

　　　　　　　　　　　　　　skewY(y)僅使元素在垂直方向扭曲變形（Y　『『『『『　　　〜　〜　〜　〜　　〜　　〜　〜　〜　）矩陣

　　　　　　　　　　　　　　matrix(, , , , ,

　　　　　　　　　　　　　　　　) 以一個含六值的(a,b,c,d,e,f)
　　　　　　　　　　　　　變換矩陣的形式指定一個2D變換，相當於直接應用一個[a b c d e f]變換矩陣。就是基於水平方向（X軸）和垂

　　　　　　　　　　　　　　直方向（Y軸）重新定位元素,改變元素的基點transform-origin　　　　　　　　　因為我們元素預設基點就是其中心位置，換句話說我們沒有使用transform-origin改變元素基點位置的情況下，

　　　　　　　　　　　　　　》　　　　　　　　transform,rotate,trans3D,transewate,transewate,transewate　transform」。

　　　　　　　　範例：（旋轉）
　　　　　　　　.box{width:100px;height:100px;background:red;margin:100px auto 0; transition:2s;}
　　　　　　　　　　　　　　　〵　　　　箱　　〴 (45deg);}
　　　　　　　　　　
　　　　　　　　　　　　　　　　　　　　

　　　　　　　　　　

　　　　　　　　　　　　　〜　　〜　　〜　　〜　　〜　　〜　〜　〜　　〜　　〜都　　〜　〜　〜都　〜　〜　　　〜都〜）　　　　　　　　　　　　.box{width:100px ;height:100px;background:red;margin:100px auto 0; transition:2s;}
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　〕　　]　　　　　　　　　
　　　　　　　　　　

111

　　　　　　　　結果：元素的位置改變。

　　　　　　　　範例：（縮放）
　　　　　　　　　　　idth:100px； );}
　　　　　　　　　　
　　　　　　　　　　　〜　　　　　　　　　　〜　
　　　　　　　　　　

　　　　　　　　範例：（扭曲　　　　　　〜　　〜　　　　　〜　〜　　　　〜　　　　〜　　　、〜　　　　　、、] 　　　　　　　　　　　　　　.box{width:80px;height :80px;background:red;margin:100px auto 0; transition:2s;}

　　　　　　　　　　　　　　　　　　　　　]　　　　　　　　　　 css3 过渡和2d变换　　　　　　　　　　　　　　　　　　　　　　　　　