一.CSS3變形transform
?
?1.平移：translate(x,y)?translateX(x)?translateY(y)??
??
??注意：如果想只向X軸平移那么可以translateX，如果想只向X軸平移那么可以translateY，X和Y不能共存。如果想向兩個(gè)方向平移，那么使用translate
??
??????? y軸
??????^?-
??????|
??????|
??????|?
??????|
??????|
??????|
?-?--------------------------------->?+?x軸
??????|
??????|?
??????|
??????|
??????|
??????|?+
?
?2.縮放：?scale(x放大倍數(shù)，y放大倍數(shù))??scaleX(x放大倍數(shù))?scaleY(Y放大倍數(shù))
??
??注意：如果想放大那么寫(xiě)大于1的數(shù)，如果想縮小，那么寫(xiě)小于1的數(shù)
??
?3.傾斜：?skew(x軸傾斜角度，y軸傾斜角度)?skewX(x軸傾斜角度)?skewY(y軸傾斜角度)
?
??注意：x軸為正值按照逆時(shí)針x軸為負(fù)值按照順時(shí)針，y軸正值為順時(shí)針傾斜，y軸負(fù)值為逆時(shí)針傾斜
?
?4.旋轉(zhuǎn)：?rotate(旋轉(zhuǎn)角度)?正值為順時(shí)針旋轉(zhuǎn)，負(fù)值為逆時(shí)針旋轉(zhuǎn)
?
二.CSS3過(guò)渡
?
?transition:需要過(guò)度的屬性 過(guò)度時(shí)間(s) 過(guò)度動(dòng)畫(huà)函數(shù) 延遲時(shí)間(s)
?
??過(guò)渡動(dòng)畫(huà)函數(shù)：
???ease：速度由快到慢（默認(rèn)值）
???linear：速度恒速（勻速運(yùn)動(dòng)）
???ease-in：速度越來(lái)越快（漸顯效果）
???ease-out：速度越來(lái)越慢（漸隱效果）
???ease-in-out：速度先加速再減速（漸顯漸隱效果）
???
?img:hover{
??????????? transform: rotate(90deg) scale(1.2);
??????????? transition: all 1s linear 1s;
??? }
?
?過(guò)渡處罰機(jī)制：
??偽類(lèi)觸發(fā)
???：hover
???：active
???：focus
???：checked

??媒體查詢(xún)：通過(guò)@media屬性判斷設(shè)備的尺寸，方向等
??JavaScript觸發(fā)：用JavaScript腳本觸發(fā)
??
三.CSS3動(dòng)畫(huà)

?1.設(shè)置關(guān)鍵幀
??@keyframes 關(guān)鍵幀名稱(chēng){
??????????? 0%{
??????????????? width: 0;
??????????????? transform: scale(1.5);
??????????? }
??????????? 33%{
??????????????? width: 60px;
??????????????? transform: translate(200px,0px) scale(2);
??????????? }
??????????? 66%{
??????????????? width: 120px;
??????????????? transform: translate(300px,0px);
??????????? }
??????????? 100%{
??????????????? width: 200px;
??????????????? transform: translate(400px,0px);
??????????? }
??????? }
?2.調(diào)用關(guān)鍵幀
??animation: 關(guān)鍵幀名稱(chēng) 執(zhí)行時(shí)間 播放方式 延遲時(shí)間 播放次數(shù);

轉(zhuǎn)載于:https://www.cnblogs.com/12aa/p/9934808.html

總結(jié)

以上是生活随笔為你收集整理的第二本书第九课的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。