hello,各位小伙伴大家好
上次給大家分享的輪播圖怎么樣
有沒有把代碼復(fù)制下來運行一下呀~
那么開始我們今天的分享
transfrom
首先來做一下準(zhǔn)備工作蜘拉，寫一個 div，以及 p 標(biāo)簽有鹿。
準(zhǔn)備工作做好了旭旭，下面進入正題：
旋轉(zhuǎn)
transform:rotate()
首先就是一個旋轉(zhuǎn)的效果，單位：deg 度數(shù) ?turn 圈為單位（轉(zhuǎn)）葱跋。
如果想要往相反的方向旋轉(zhuǎn)持寄，那么可以在單位前面加一個負(fù)號，就可以實現(xiàn)反向旋轉(zhuǎn)了~
下面給大家演示各種旋轉(zhuǎn)效果：繞 Z 軸旋轉(zhuǎn)娱俺，繞 X 軸旋轉(zhuǎn)稍味，繞 Y 軸旋轉(zhuǎn)，繞 Z 軸旋轉(zhuǎn)荠卷，旋轉(zhuǎn) 45deg模庐，旋轉(zhuǎn)一圈~
都放在一張圖上演示了，效果怎么樣油宜，是不是還可以赖欣。
縮放?
transform: scale()?不帶單位
大于1：放大，相當(dāng)于放大原來的多少倍验庙，小于1：縮小顶吮，相當(dāng)于縮小多少倍。
只有一個值的時候粪薛，既代表 X 軸悴了，也代表 Y 軸，兩個值的時候违寿，第一個代表 X 軸湃交，第二個代表 Y 軸。
下面演示效果：縮小藤巢，放大搞莺，X 軸縮小、Y 軸放大掂咒。
我們來一起看一下縮放的效果：
位移
transform: translate() ? ?單位是px
位移之后才沧，原來的位置不會被其他元素占據(jù)，并且移動到其他的位置不會影響其他元素绍刮。
一個值的時候代表 X 軸方向温圆，兩個值的時候，第一個值代表 X 軸孩革，第二個值代表 Y 軸岁歉。
演示效果：默認(rèn)方向移動200px，X 軸方向移動200px膝蜈、Y 軸方向移動100px锅移，X 軸方向移動200px熔掺，Y 方向移動200px，Z 軸方向移動200px非剃。
來看一下各種位移效果吧~瞬女，因為 Z 軸位移是 3D 效果，所以我們看不到努潘，其他的位移都是有效果的诽偷。
傾斜
transform: skew() 傾斜 單位：角度
只有一個值的時候，往 X 軸方向傾斜疯坤，兩個值的時候报慕，第一個值代表 X 軸，第二個值代表 Y 軸压怠。
演示效果：默認(rèn)方向傾斜 30deg眠冈，X 軸方向傾斜 30deg，Y 軸方向傾斜30deg菌瘫，X 軸傾斜 30deg蜗顽、Y 軸傾斜 45deg。
知識點分享完了雨让，怎么樣號可以是不是雇盖，那么我們來做一個小的練習(xí)。制作一個跳動的愛心栖忠，就像這個樣子的崔挖。
怎么樣要不要挑戰(zhàn)一下~
那么今天就到這里了
各位小伙伴
再見了
