2020.8.18+王杉

学习内容：

转换：

1.转换分为2D（x轴、y轴）和3D（x轴、y轴、z轴）的转换。

2.2Dtransform效果和取值：

• 位移：translate 缩放：scale 旋转：rotate 倾斜：skew

3.3Dtransform效果和取值：

• 旋转：translate 缩放：scale 旋转：rotate 倾斜：skew，相较于2D多一个Z轴
• *透视距离：模拟人的眼睛到3D转换的元素之间的距离。距离不同，看到效果不同，实现3D效果。（perspective：1000px;）

4.样式：transform-style：flat（2D效果）preserve-3D(子元素保留3D位置)

5.转换原点transform-origin：有三种取值方式：

1. px单位数字
2. %取值
3. 关键字如：x：left/center/right y：left/center/right

过渡：

使css的值，在一段时间内平缓变化的效果。过度的代码要写在原本样式中，过渡效果有去有回，如果写在hover中，过渡效果有去无回。

具体过渡的属性有：

1. transition-property：过渡属性支持（一般all代表所有属性）
2. transition-duration：过度事件（s为单位）
3. transition-timing-function：动作方式（ease：默认值，慢开，中快，慢关）默认（liner匀速）常用等。
4. transition-delay：过渡时间（s为单位）

*简写：transition : property duration timing-function delay；

动画：

动画：多个过渡用关键帧控制从一种样式变成另一种样式。

关键帧：动画执行节点，至少两个关键帧。

动画的声明：使用@keyframes{

（内容至少两个关键帧：开始和结束） }

具体动画属性：

1. 动画名称：animation-neme：
2. 动画执行事件；animation-duration：
3. 动画事件曲线函数：animation-timing-function：
4. 动画开始延迟：animation-delay：
5. 动画播放次数：animation-iteration-count：
6. 动画播放顺序：animation-direction：
7. 动画鼠标悬停：animation-play-state：（在hover中使用）

*简写：animation : name duration timing-function delay count direction；

今天做了华为商城的两个小部分，主要考验了我们到今天为止把之前的知识结合起来的用处，综合功能，虽然是一些稍微简单的东西但是还是有提升的加强熟练度。其次我们还做了一个翻卡片的练习，就是将今天学习的使用起来，熟悉知识点的用法，总的来说今天不错，也做了些东西，总是在进步嘛。