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。
知识点分享完了，怎么样号可以是不是，那么我们来做一个小的练习。制作一个跳动的爱心，就像这个样子的。
怎么样要不要挑战一下~
那么今天就到这里了
各位小伙伴
再见了
网友评论