hello,各位小伙伴大家好

上次給大家分享的輪播圖怎么樣

有沒有把代碼復制下來運行一下呀~

那么開始我們今天的分享

transfrom

首先來做一下準備工作，寫一個 div，以及 p 標簽。

準備工作做好了，下面進入正題：

旋轉

transform:rotate()

首先就是一個旋轉的效果，單位：deg 度數 ?turn 圈為單位（轉）。

如果想要往相反的方向旋轉，那么可以在單位前面加一個負號，就可以實現反向旋轉了~

下面給大家演示各種旋轉效果：繞 Z 軸旋轉，繞 X 軸旋轉，繞 Y 軸旋轉，繞 Z 軸旋轉，旋轉 45deg，旋轉一圈~

都放在一張圖上演示了，效果怎么樣，是不是還可以。

縮放?

transform: scale()?不帶單位

大于1：放大，相當于放大原來的多少倍，小于1：縮小，相當于縮小多少倍。

只有一個值的時候，既代表 X 軸，也代表 Y 軸，兩個值的時候，第一個代表 X 軸，第二個代表 Y 軸。

下面演示效果：縮小，放大，X 軸縮小、Y 軸放大。

我們來一起看一下縮放的效果：

位移

transform: translate() ? ?單位是px

位移之后，原來的位置不會被其他元素占據，并且移動到其他的位置不會影響其他元素。

一個值的時候代表 X 軸方向，兩個值的時候，第一個值代表 X 軸，第二個值代表 Y 軸。

演示效果：默認方向移動200px，X 軸方向移動200px、Y 軸方向移動100px，X 軸方向移動200px，Y 方向移動200px，Z 軸方向移動200px。

來看一下各種位移效果吧~，因為 Z 軸位移是 3D 效果，所以我們看不到，其他的位移都是有效果的。

傾斜

transform: skew() 傾斜 單位：角度

只有一個值的時候，往 X 軸方向傾斜，兩個值的時候，第一個值代表 X 軸，第二個值代表 Y 軸。

演示效果：默認方向傾斜 30deg，X 軸方向傾斜 30deg，Y 軸方向傾斜30deg，X 軸傾斜 30deg、Y 軸傾斜 45deg。

知識點分享完了，怎么樣號可以是不是，那么我們來做一個小的練習。制作一個跳動的愛心，就像這個樣子的。

怎么樣要不要挑戰一下~

那么今天就到這里了

各位小伙伴

再見了