【CSS】移动Web篇01——平面转换、渐变、空间转换、动画

黑马程序员视频地址：

前端Web开发HTML5+CSS3+移动web视频教程https://www.bilibili.com/video/BV1kM4y127Li?vd_source=0a2d366696f87e241adc64419bf12cab&spm_id_from=333.788.videopod.episodes&p=132https://www.bilibili.com/video/BV1kM4y127Li?vd_source=0a2d366696f87e241adc64419bf12cab&spm_id_from=333.788.videopod.episodes&p=132https://www.bilibili.com/video/BV1kM4y127Li?vd_source=0a2d366696f87e241adc64419bf12cab&spm_id_from=333.788.videopod.episodes&p=132

目录

平面转换 transform

平移 translate

旋转 rotate

改变转换原点 transform-origin

技巧：多重转换

缩放 scale

倾斜 skew

渐变

线性渐变 linear-gradient

径向渐变 radial-gradient

空间转换 transform

平移 translate

视距 perspective

旋转 rotate

左手法则

拓展 

立体呈现 transform-style

实现步骤

缩放 scale

动画 animation

实现步骤

定义动画 @keyframes

使用动画（集中写法）

使用动画（单独写法）

原理 

无缝动画原理

逐帧动画

多组动画

---

平面转换 transform

---

平移 translate

---

旋转 rotate

---

改变转换原点 transform-origin

---

技巧：多重转换

---

缩放 scale

---

倾斜 skew

---

渐变

---

线性渐变 linear-gradient

---

径向渐变 radial-gradient

---

空间转换 transform

---

平移 translate

---

视距 perspective

---

旋转 rotate

---

左手法则

---

拓展 

---

立体呈现 transform-style

---

实现步骤

---

缩放 scale

---

动画 animation

实现步骤

定义动画 @keyframes

---

 使用动画（集中写法）

---

使用动画（单独写法）

---

原理 

无缝动画原理

---

逐帧动画

---

多组动画