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轴。
演示效果：默认方向移动px，X轴方向移动px、Y轴方向移动px，X轴方向移动px，Y方向移动px，Z轴方向移动px。
来看一下各种位移效果吧~，因为Z轴位移是3D效果，所以我们看不到，其他的位移都是有效果的。
倾斜
transform:skew()倾斜单位：角度
只有一个值的时候，往X轴方向倾斜，两个值的时候，第一个值代表X轴，第二个值代表Y轴。
演示效果：默认方向倾斜30deg，X轴方向倾斜30deg，Y轴方向倾斜30deg，X轴倾斜30deg、Y轴倾斜45deg。
知识点分享完了，怎么样号可以是不是，那么我们来做一个小的练习。制作一个跳动的爱心，就像这个样子的。
怎么样要不要挑战一下~
那么今天就到这里了
各位小伙伴
再见了