web transform图片旋转_web前端入门到实战：HTML复杂动画和变形

1、复杂动画

(1)涉及到的属性：

animation-name：动画名称；

animation-duration：单次动画总时长；

animation-timing-function：时间函数；

animation-delay：播放前延时的时长；

animation-iteration-count：播放次数(具体的数字)，当设置infinite时是循环播放；

animation-direction：播放顺序，其中normal是正常播放，alternate是轮流反向播放，播放次数必须在2次以上。

(2)书写方式

@keyframes 名字(自己取一个名字){ ——>定义一个动画}

 复杂动画练习

动画练习

web前端开发学习Q-q-u-n： 767-273-102 ，分享学习的方法和需要注意的小细节

效果如下：

2、盒子变形

(1) 变形：通过变形可以改变盒子的视觉效果，变形不会改变盒子原本的位置和尺寸，因此不会对其他元素造成影响。

(2) 变形的类型

Translate(移动)

Scale(缩放，1以下是缩小，1以上是扩大)

Skew(倾斜，单位deg)

Rotate(旋转，默认是沿着Z轴旋转，单位deg)

(3) 定义原点

Transform-origin：设置盒子的中心点。

(4) 其他属性

背面可见性：backface-visibility

visible：默认值，背面可见

hidden：背面不可见

 盒子变形

正面

反面

web前端开发学习Q-q-u-n： 767-273-102 ，分享学习的方法和需要注意的小细节

变形效果如下：