见过这样标签吗？旋转，放大还能瞬移~

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。

知识点分享完了，怎么样号可以是不是，那么我们来做一个小的练习。制作一个跳动的爱心，就像这个样子的。

怎么样要不要挑战一下~

那么今天就到这里了

各位小伙伴

再见了