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

??媒體查詢：通過@media屬性判斷設備的尺寸，方向等
??JavaScript觸發：用JavaScript腳本觸發
??
三.CSS3動畫

?1.設置關鍵幀
??@keyframes 關鍵幀名稱{
??????????? 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.調用關鍵幀
??animation: 關鍵幀名稱 執行時間 播放方式 延遲時間 播放次數;

轉載于:https://www.cnblogs.com/12aa/p/9934808.html

總結

以上是生活随笔為你收集整理的第二本书第九课的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。