CSS学习第九篇
- [1. 2D转换](#1. 2D转换)
-
- [1.1 2D转换之translate](#1.1 2D转换之translate)
- [1.2 让一个盒子水平垂直居中](#1.2 让一个盒子水平垂直居中)
- [1.3 2D转换之rotate](#1.3 2D转换之rotate)
- [1.4 CSS3 三角](#1.4 CSS3 三角)
- [1.5 设置转换中心点](#1.5 设置转换中心点)
- [1.6 旋转中心点案例](#1.6 旋转中心点案例)
- [1.7 2D转换之缩放scale](#1.7 2D转换之缩放scale)
- [1.8 2D转换综合写法以及顺序问题](#1.8 2D转换综合写法以及顺序问题)
- [1.9 2D转换小结](#1.9 2D转换小结)
- [2. 动画](#2. 动画)
-
- [2.1 CSS3动画基本使用](#2.1 CSS3动画基本使用)
- [2.2 动画序列](#2.2 动画序列)
- [2.3 CSS3动画常见属性](#2.3 CSS3动画常见属性)
- [2.4 CSS3动画简写](#2.4 CSS3动画简写)
- [2.5 速度曲线之steps步长](#2.5 速度曲线之steps步长)
- [3. 3D转换](#3. 3D转换)
-
- [3.1 认识3D转换](#3.1 认识3D转换)
- [3.2 3D转换translate 3d](#3.2 3D转换translate 3d)
- [3.3 透视perspective](#3.3 透视perspective)
- [3.4 translateZ](#3.4 translateZ)
- [3.5 3D旋转rotateX](#3.5 3D旋转rotateX)
- [3.6 3D旋转rotateY](#3.6 3D旋转rotateY)
- [3.7 3D旋转rotateZ](#3.7 3D旋转rotateZ)
- [3.8 3D旋转transform-style](#3.8 3D旋转transform-style)
- [3.9 两面翻转盒子案例](#3.9 两面翻转盒子案例)
- [4. 浏览器私有前缀](#4. 浏览器私有前缀)
1. 2D转换
1.1 2D转换之translate
简介：
2D：
实操：效果：
只移动一个坐标轴
总结：
（不影响其他元素，即第一个盒子不影响第二个盒子）
1.2 让一个盒子水平垂直居中
代码如下：
1.3 2D转换之rotate
旋转：
实操：
1.4 CSS3 三角
案例：
实操
1.5 设置转换中心点
设置转换中心点
实操（配合的是过渡，不是动画）
1.6 旋转中心点案例
实操：
1.7 2D转换之缩放scale
缩放
实操：
1.8 2D转换综合写法以及顺序问题
综合写法：
实操：
1.9 2D转换小结
小结：
2. 动画
2.1 CSS3动画基本使用
CSS3学习目录（重点）：
动画的介绍
动画的使用：定义+使用。
keyframes定义动画先来看这里的0和100是怎么一回事
实操①定义动画
translateX(数值)：控制元素在水平方向的位移（正数是向右，负数向左）。
②使用动画animation-name
拓：
从（0，0）到（1000px，0）
2.2 动画序列
动画不止从A状态到B状态
起始可以省略。
①定义
②调用
注意事项
2.3 CSS3动画常见属性
常见属性：
除了先前已经学过（三个必须的）的，另外增加的有：
2.4 CSS3动画简写
简写：
还可以再省略（对于本案例而言）
2.5 速度曲线之steps步长
速度曲线补充：
steps：一步一步地实现效果
案例：打字机效果效果：
一个字一个字出现
3. 3D转换
3.1 认识3D转换
简介：
3D：
3.2 3D转换translate 3d
学习内容：
先来学习3D移动
实操：
3.3 透视perspective
视距：
实操：500px的时候350px的时候
350px，距离变小了，看起来就变大了（近大远小）
3.4 translateZ
translateZ
3.5 3D旋转rotateX
沿着X轴旋转
实操：效果：（看不到动图）
正负值旋转方向：
3.6 3D旋转rotateY
3D旋转rotateY
实操同理
旋转法则
3.7 3D旋转rotateZ
3D旋转rotateZ
沿着自定义轴 旋转
3.8 3D旋转transform-style
三维立体环境
实操：
3.9 两面翻转盒子案例
翻转前：
翻转后：
思路：
实操：
4. 浏览器私有前缀
浏览器私有前缀
