一文说清楚 css3 具有颠覆意义的 2D 转换效果

html5/css3 基础篇（第二篇）

回顾

今天我们来说一说 h5/c3 的第二篇，回顾上一篇我们开始了 h5/c3 的第一篇，我们重新学了一下 VsCode 的基础应用以及里面的插件，插件也分为基础和进阶，不同学习阶段运用不同的插件会如虎添翼。在之后我们学习了 html5 中新增的语义化标签、还有新增的多媒体标签等。还有表单和 css 属性选择器和伪类这些，不止一遍的强调基础是重中之重，基础阶段的学习本身就是重复学习的过程，基础一定要打牢。

css3 2D 转换

转换（transform）是 css3 中具有颠覆意义性的特征之一，原来的 css 实现的都是一些平面的东西，限制在了平面上，而 css3 新增的转换和动画效果使得 css 的功能更加强大。可以实现元素的位移、旋转、缩放等效果。转换（transform）也可以理解为变形，在 css3 中一般分为三种模式

• 移动：transform：translate

• 旋转：transform：rotate

• 缩放：transform：scale

css3 2D 转换——移动

移动：translate，移动是可以改变元素在页面中的位置，类似于定位。 具体如下图所示：

语法：

// 确定 translate x轴和y轴transform：translate（x，y）
// 只改变 translate x轴transform：translateX（）
// 只改变 translate y轴transform：translateY（）

可以自己在编辑器中试一试效果，除了这些 translate 还需要注意的是：

1. 定义 2D 转换中的移动，沿着 X 和 Y 轴移动元素

2. translate 最大的优点：不会影响到其他元素的位置

3. translate 中的百分比单位是相对于自身元素 translate:(50%, 50%)，如果是百分比的话，移动自身宽度的 50%

4. 对行内标签没有效果

css3 2D 转换——旋转

旋转：rotate，旋转是元素按照度数转动一定的比例

旋转之前的效果：

鼠标放上去旋转之后的效果：

// 旋转语法// 顺时针旋转45度transform：rotate（45deg）

可以自己在编辑器上试一试，除此之外，还需要注意的是：

1. rotate 里面跟度数，单位是 deg 比如：45（deg）

2. 角度是顺时针，负时 为逆时针

3. 默认的旋转点是元素的正中心

css3 2D 转换——旋转中心点

设置旋转中心点——transform-origin 语法：transform-origin：x y； —— x 和 y 可以是百分比也可以是：top、left、right、bottom 等

自己可以在编辑器中试一试，除此之外，需要注意的是：

1. 注意后面的参数 x 和 y 用空格隔开

2. x、y 默认转换的中心点是元素的中心点（50%，50%）

3. 还可以给 x、y 设置像素或者是 方位名词（top、right、bottom、left、center）

css3 2D 转换——缩放

缩放：scale，缩放给元素添加上了这个属性就能控制元素的放大还是缩小

语法：

// 控制元素的放大和缩小transform：scale（x，y）
// 值可以简写为小数点transform：scale（0.5）

缩放效果之前：

缩放效果之后：

自己可以在编辑器中试一试，需要注意的是：

1. 注意其中 x 和 y 用逗号分开

2. transform：scale（1，1） 宽高都放大一倍，相当于没有放大

3. transform：scale（2，2） 宽高都放大了 2 倍

4. transform：scale（2）：只写一个参数，第二个参数则和第一个参数一样，相当于 scale（2，2）

5. transform：scale（0.5，0.5） 缩小一倍 1.scale 缩放最大的优势就是：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子

2D 转换综合性写法

1. 同时使用多个转换，其格式为：transform：translate（）rotate（）scale（）等等

2. 其顺序会影响转换的效果（先旋转会改变坐标轴方向）

3. 当我们同时又位移了其他属性的时候，记得要将位移放在最前面

css 动画

动画：animation，是 css 中具有颠覆意义的特征之一，可以设置多个节点来控制一个或多个动画效果，常用来实现较为复杂的动画效果

动画的基本使用：

1. 先定义动画

2. 再使用（调用）动画

// 定义动画// move：是定义动画的名字@keyframes move {  // 开始状态  0%{    transform: translate(0px)  }  100%{    transform: translate(100px)  }}
// 元素调用动画div{  // 调用动画  animation: move;  // 持续时间  animation-duration: 1s;}

可以自己在编辑器中试一试。

动画序列

1. 0% 是动画的开始，100%是动画的完成，这样的规则就是动画序列

2. 在 @keyframes 中规定某项 css 样式，就能创建由当前样式逐渐改为新样式的动画效果

3. 动画是使元素从一种样式逐渐变化为另一种样式的效果，您可以改变任意多的样式任意多次数

4. 请用百分比来规定变化发生的事件，或用关键词 “form” 和 “to” ，等同于 0%和 100%

动画常用的属性：

1. @keyframes：规定动画名称

2. animation：所有动画属性的简写属性，除了 animation-play-state 属性

3. animation-name：规定 @keyframes 动画名称

4. animation-duration：规定动画完成一个周期所花费的秒和毫秒

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

6. animation-delay：规定动画何时开始，默认是 0

7. animation-iteration-count：规定动画被播放的次数，默认是 1，还有 infinite

8. animation-direction：规定动画是否在下一周期逆向播放，默认是 “normal”，altemate 逆播放

9. animation-play-state：规定动画是否正在运行或暂停，默认是 “running” 还有 “paused”

10. animation-fill-mode：规定动画结束后状态，保持 forwards 回到起始 backwards

动画简写属性

在往后的工作中基本上见到的都是简写的形式，所以往后熟练之后都可以使用简写的形式，防止代码冗余

animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束状态（前两个属性不能省略）

animation：name duration timing-function delay iteration-count direction fill-mode；

以下是在动画中常用的效果：

1. 简写属性里面不包含 animation-play-state

2. 暂停动画：animation-play-state：puased；经常和鼠标经过元素等其他搭配使用

3. 想要动画走回来，而不是直接调回来：animation-direction：alternate

4. 盒子动画结束后，停留到结束位置：animation-fill-mode：forwards

动画速度曲线步长

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

• animation-timing-function：linear —— 动画从头到尾的速度相同，匀速的

• animation-timing-function：ease —— 默认。动画以低速开始，然后加速，在结束前变慢

• animation-timing-function：ease-in —— 动画以低速开始

• animation-timing-function：ease-out —— 动画以低速结束

• animation-timing-function：ease-in-out：动画以低速开始和结束

• animation-timing-function：steps（） —— 指定了时间函数中的间隔数量（步长），可以实现打字效果

结束

好了，今天 css3 2D 转换这一讲就介绍完了，可以自己在编辑器中实现一些小 Demo，巩固基础。