7.2 CSS 2D,3D转换与动画

声明：本人前端学习笔记的所有内容均为b站上pink老师课程的学习笔记，如果想详细了解的可以搜索以下网址：

1. H5C3+移动布局： 黑马程序员pink老师前端入门视频教程 HTML5+CSS3+移动端布局-flex布局rem布局响应式布局摹客蓝湖使用-简单有趣好玩
2. JavaScript系列 ：JavaScript基础语法-dom/bom-es6-jQuery-数据可视化echarts-包含笔记源码作业黑马程序员pink老师前端入门视频教程（持续更新）

---

1. CSS 2D转换

转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果。2D转换是改变标签在二维平面上的位置和形状的一种技术

转换可以简单理解为变形：

• 移动：translate
• 旋转：rotate
• 缩放：scale

1.1 2D转换之 - 移动translate

1. 二维坐标系：

2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位

2. 语法：

transform: translate(x,y); 或者分开写：
transform: translateX(n);
transform: translateY(n);

3. 重点：

• 定义2D转换中的移动，沿着X和Y轴移动元素
• translate最大的优点：不会影响到其他元素的位置
• translate中的百分比单位是相对于自身元素的translate:(50%, 50%);
• 对行内标签没有效果

4. 让一个盒子水平居中

div {
    position: relative;
    width: 500px;
    height: 500px;
    background-color: orange;
}

p {
    position: absolute;
    top: 50%;
    left: 50%;/*先采用定位使盒子移动父盒子的一半宽度和高度*/
    transform: translate(-50%, -50%); /*再采用移动，向上，向左移动盒子自身的50%*/
    background-color: tomato;
    width: 200px;
    height: 200px;
}
   
<div>
	<p></p>
</div>

1.2 2D转换之 - 旋转rotate

2D旋转指的是让元素在2D平面内顺时针或者逆时针旋转

1. 语法：

transform: rotate(度数)

2. 重点：

• rotate里面跟度数，单位是deg，比如rotate(45deg)
• 角度为正时，顺时针，负时为逆时针
• 默认旋转的中心点是元素的中心点

3. 设置转换中心点 transform-origin

transform-origin: x y;

• 注意后面的参数 x 和 y 用空格隔开
• x y 默认转换的中心点是元素的中心点(50% 50%)
• 还可以给x y 设置像素 或者 方位名词 (top bottom left right center)

1.3 2D转换之- 缩放scale

缩放，顾名思义可以放大和缩小，只要给元素添加上了这个属性就能控制它放大还是缩小

1. 语法：

transform: scale(x, y);

2. 注意：

• 注意其中的x和y用逗号分隔
• transform: scale(2, 2): 宽和高都放大2倍；等价于transform: scale(2): 只写一个参数，第二个参数和第一个参数一样，即等比例缩放
• transform: scale(0.5, 0.5): 缩小
• scale缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他的盒子

1.4 2D转换综合写法以及顺序问题

注意：

• 同时使用多个转换，其格式为：transform：translate() rotate() scale() …
• 其顺序会影响转换的效果（先旋转会改变坐标轴的位置）
• 当我们同时有位移和其他属性的时候，记得要将位移方向放在最前面（重要！！！）

2. CSS3 动画

动画（animation）是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

2.1 动画的基本使用

制作动画分为两步：

1. 先定义动画
2. 再使用（调用）动画

1，用keyframes定义动画（类似定义类选择器）

@keyframes 动画名称 {
    0% {
        width：100px;
    }
    100% {
        width:200px;
    }
}

2. 元素使用动画

div {
	/*调用动画*/
	animation-name：动画名称；
	/*持续时间*/
	animation-duration：持续时间；
}

2.2 动画序列

动画序列：

• 0%是动画的开始，100%是动画的完成，这样的规则就是动画序列
• 在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐转为新样式的动画效果
• 动画是一个元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的次数
• 请用百分比来规定变化发生的时间，或用关键词“from”和“to”，等同于0%和100%
• 可以做多个状态的变化，keyframes代表关键帧，里面的百分比要是整数，他们是我们的总的时间的划分（例如总时间是10s，则25%表示2.5s时刻则转化到该关键帧）

2.3 动画属性

属性	描述
@keyframes	规定动画
animation	所有动画属性的简写属性，除了animation-play-state属性
animation-name	规定@keyframes动画的名称（必须的）
animation-duration	规定动画完成一个周期所花费的秒或者毫秒，默认是0.（必须的）
animation-timing-function	默认动画的速度曲线，默认是“ease”。
animation-delay	规定动画何时开始，默认是0.
animation-iteration-count	规定动画被播放的次数，默认是1，还有infinite（无限循环播放）
animation-direction	规定动画是否在下一个周期逆向播放，默认是normal，alternate逆播放
animation-play-state	规定动画是否正在运行或暂停，默认是running，还有pause
animation-fill-mode	规定动画结束后的状态，保持：forwards；回到起始：backwards。

2.3 动画简写属性

animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态

animation: name duration timing-function delay iteration-count direction fill-mode;

• 简写属性里不包含animation-play-state
• 暂停动画：animation-play-state：paused；经常和鼠标经过等其他配合使用
• 想要动画走回来，而不是直接回来：animation-direction: altenate
• 盒子动画结束后，停在结束位置：animation-fill-mode：forwards

2.5 速度曲线细节

animation-timing-function：规定动画的速度曲线，默认是“ease”

值	描述
linear	动画从头到尾的速度是相同的，匀速
ease	默认。动画从低速开始，然后加速，在结束前变慢
ease-in	动画从低速开始
ease-out	动画以低速结束
ease-in-out	动画以低速开始和结束
steps()	指定了时间函数中的间隔数量（步长）

重点：steps就是分几步来完成我们的动画，有了steps就不要再写ease或者linear了

我们元素也可以添加多个动画、用逗号分隔

animation: name1 duration1 .... , name2 duration2 ....;

3. CSS 3D转换

3.1 三维坐标系

三维坐标系其实就是指立体空间，立体空间是由三个轴共同组成的

• x轴：水平向右 注意：x轴右边是正值，左边是负值
• y轴：垂直向下 注意：y下面是正值，上面是负值
• z轴：垂直屏幕 注意：往外面是正值，往里面是负值
  

3.2 3D移动 translate3d

3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向

transform: translateX(100px);
transform: translateY(100px);
/* 1. translateZ 后面的单位我们一般跟px */
transform: translateZ(100px);
/* 2. 3D移动有简写的方法 */
transform: translate3d(x,y,z); 
 /* 3. xyz是不能省略的，如果没有就写0 */
transform: translate3d(400px, 100px, 100px);

3.3 透视perspective

在2D平面产生近大远小视觉立体，但是只是效果是二维的

• 如果想要在网页产生3D效果必须加透视（理解成3D物体投影在2D平面内），有了透视，我们就能看到translateZ引起的变化了
• 透视我们称为视距， 透视的单位是像素
• 距离视距点越近的在电脑平面成像就越大，越远成像就越小
  

透视写在被观察元素的父盒子上面，translateZ写在做改动的元素上面

d：就是视距，视距就是人的眼睛到屏幕的距离，透视（视距）越小，我们看到的物体越大

z：就是z轴，物体距离屏幕的距离，z轴越大（正值），我们看到的物体就越大

3.4 3D旋转 rotate3d

3D旋转可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转

transform: rotateX(45deg); 沿着x轴正方向旋转45度
transform: rotateY(45deg); 沿着y轴正方向旋转45度
transform: rotateZ(45deg); 沿着z轴正方向旋转45deg
transform: rotate3d(x,y,z,deg);  沿着自定义轴旋转deg角度（了解即可）
transform: rotate3d(1, 1, 0, 45deg);

对于元素旋转方向的判断，我们需要学习一个左手准则

• 左手的大拇指指向x轴的正方向，其余手指的弯曲方向就是该元素沿着x轴旋转的方向
• 左手的大拇指指向y轴的正方向，其余手指的弯曲方向就是该元素沿着y轴旋转的方向
• 对于z轴，顺时针旋转为正方向，逆时针旋转为反方向

3.5 3D呈现 transform-style

• 控制子元素是否开启三维立体环境

• 默认transform-style: flat 子元素不开启3d立体空间 （如左图） transform-style: preserve-3d 子元素开启立体空间（如右图）

• 代码需要写给父级，但影响的是子盒子（重要！！！）
  

4. 浏览器私有前缀

浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无需添加

4.1 私有前缀

• -moz-：代表firefox浏览器私有属性
• -ms-：代表ie浏览器私有属性
• -webkit-：代表safari、chrome私有属性
• -o-：代表Opera私有属性

4.2 提倡的写法

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;