大家好，歡迎來到雄雄的小課堂，那個……辣椒醬很好吃的，哈哈哈哈！今天給大家分享的內容是利用CSS制作網頁的動畫。

辣椒醬：自從有了這款辣椒醬，拌飯再也不用老干媽

CSS變形

CSS的變形包括這么幾種效果，分別有平移（translate），縮放（scale），傾斜（skew），旋轉（rotate），下面我們來分別看看。

01

平移（translate）

語法：transform: translate（X軸平移的像素，Y軸平移的像素）

Eg:

#div1:hover{transform: translate(10px,-9px);}

效果如圖所示：

02

縮放（scale）

語法：transform: scale（寬度縮放值，高度縮放值）

如果參數只有一個值，默認第二個值和第一個值相等；默認值是1,0-0.99的任意一個數字可以縮小元素，大于1則會使元素放大。例如：scale（0.8），元素會縮小0.8倍，而scale（1.5）元素則會放大1.5倍。

Eg:

#div2:hover{transform: scale(1.2);}

效果圖：

03

旋轉（skew）

語法：transform: skew(X軸傾斜的角度,Y軸傾斜的角度);單位為deg(°)

Eg：

#div3:hover{transform: skew(10deg,10deg); }

效果圖：

04

旋轉（rotate）

語法：transform: rotate(旋轉的度數);其中參數的單位是deg(°)。

Eg:

#div4:hover{transform: rotate(20deg); }

效果如圖：

關于CSS的其他動畫，我們下期在分享，今天太忙啦~

往期精彩

jsp中使用cookie時報錯……

2020-11-17

Java中的TreeSet集合會自動將元素升序排序

2020-11-16

“老師，請您多關注一下我吧！！！”

2020-11-15

晨讀，難道只是為了完成任務而讀的嗎？

2020-11-14

Vector是線程安全的？

2020-11-13

為什么要有周考？周考是用來干什么的？

2020-11-12

點分享

點點贊

點在看

總結

以上是生活随笔為你收集整理的CSS3的几个变形案例……的全部內容，希望文章能夠幫你解決所遇到的問題。

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