transition&transform,CSS中過分和變形的設置

設置樣式的過分效果


transition-property: none/all;
transition-duration:2s;運動時間,默認是0秒
transition-delay:0s; 延遲時間默認0秒
transition-timing-function:ease;逐漸變慢(默認)

linear勻速 ease-in加速 ease-out減速 ease-in-out先加速再減速*/

 1,樣式 持續時間 延時  可連寫多組每一個樣式之間使用','隔開

.過分的樣式 能夠同時指定多個 

1,過分的時間 2,過分的樣式
transition: 1s width , 2s height , 1s background;

 

2. 過分的形式
貝塞爾曲線很重要 幾乎全部的都能用貝塞爾曲線作出來
網址:http://cubic-bezier.com/#.14,.63,.79,.21

 

僞類選擇器,光標移動到上面時觸發,產生動畫效果

 

 

-------------------------------------------------

transform: 形變屬性 

平移:translate

平移:translate 給定座標, 沿着作標軸移動
第一個參數:x軸座標 第二個參數:y軸座標 以自身做爲參照

可給 數值或者百分比%

 

 

旋轉角度  單位是deg  以自身中心做爲旋轉中心

正數沿着順時針方向   負數逆時針方向

設置形變參考原點 默認值是center  top  bottom left right

transform: rotateX(45deg);
transform: rotateY(45deg);

 

 

scale() 縮放倍數
transform: scale(2.0, 0.5)
大於1表示放大 1如下表明縮小
盒子裏的內容也會跟着一塊兒縮放

transform-origin: left;  縮放的原點
transform: scale(0.2, 0.5); 參數XY
transform: scaleX(0.5);  沿着X軸
transform: scaleY(.4);  沿着Y軸

 

 

 

skew() 傾斜
X軸的傾斜:正數逆時針
Y軸的傾斜:正數順時針

傾斜指的是XY軸的傾斜 
transform-origin: left;  設置傾斜的原點
transform: skew(30deg, 30deg);  參數XY
transform: skewX(30deg); 沿着X軸
transform: skewY(30deg);  沿着Y軸