CSS3-2D变换与3D变换、过渡与动画一文全搞定

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了CSS3-2D变换与3D变换、过渡与动画一文全搞定，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4811字，纯文字阅读大概需要7分钟。

内容图文

引言

感觉这四大部分的内容需要一起研究，才算是把三维立体空间的各种动态效果的最基础的知识点给吃透，我也一直想找到一个关于这部分比较全面系统且有案例来验证其中知识点的教程，也搜过不少次，可是都没有找到，只能各个地方查找，然后拼凑到一起，而且又不显得太过学术，要用通俗的手册式教程，来介绍给大家，所以就做了这个算是自己整理笔记的教程。

2D变换

位移：translate translateX translateY

一个参数：translate(x)，代表沿x轴位移x像素，y轴默认为0
两个参数：translate(x, y)，代表沿x轴和y轴位移的距离
x、y单位为px
x值：为正则沿着x轴向右位移，为负则沿着x轴向左位移
y值：为正则沿着y轴向下位移，为负则沿着y轴向上位移
如果是通过active进行位移，执行完毕后会还原
单独写法：translateX(x) translateY(y)
位移的参考原点为元素左上角

旋转：rotate

rotate(angle)：参数只有一个
参数为旋转的角度，单位为deg
2d空间只能围绕元素中心的z轴旋转
参数为正值则顺时针旋转，为负值则逆时针旋转
默认为围绕元素中心为原点进行旋转
缩放：scale

一个参数：scale(num)，代表同时在x轴和y轴两个方向缩放相同的倍数
两个参数：scale(x, y) ，分别代表x和y轴方向缩放相应的倍数
参数为数字，无单位
默认值为1倍，就是不缩放
默认为围绕元素中心为原点进行缩放

变形：skew skewX skewY

一个参数：skew(x)，代表沿x轴变形x角度，y轴默认为0
两个参数：skew(x, y)，代表沿x轴变形x的角度，沿y轴变形y的角度
参数为变形的角度，单位为deg
x值：为正则向左变形，为负则向右变形
y值：为正则向上变形，为负则向下变形
单独写法：skewX(x) skewY(y)
默认为围绕元素中心为原点进行变形

变换的原点

原点就是元素的中心，可以通过transform-origin属性改变原点位置
默认值为transform-origin: center center;
除了位移(因为位移元素直接移跑了)，别的变换(旋转、缩放、变形）都是围绕原点变换的
原点关键字：top bottom center left right
只设置一个的话，另一个为默认值center
也可以使用px、em、百分比值(一般用不到)
设置的偏移值都是从元素左上角开始的

变换的特点

变换之后的元素不会脱离文档流
可以移出屏幕边缘或遮挡住旁边其他元素
行内元素需要改变元素的display为block或inline-block，或者改变其父元素的display为flex或grid后，才能使用变换
可以使用多重变换，用空格隔开，变换的每个值从右向左依次执行，通常将平移放到首位，最后执行

过渡：transition

概念：指元素从一种属性的取值逐渐变化为另一种同样属性的取值
由于需要慢慢改变取值，所以需要是可以量化的属性值才有过渡的效果
默认对所有属性设置过渡效果，持续时间为0
最简单的设置过渡效果的写法：transition: 1s;
使用过渡的属性名称：transition-property

定义应用过渡效果的属性名称列表。
取值：
单个或多个属性名称，多个属性用逗号隔开
none：没有属性获得过渡效果。
all：所有属性都将获得过渡效果。
不推荐设置为all，太耗性能，会遍历所有该元素的属性
过渡效果花费的时间：transition-duration

默认为0，没有过渡效果
单位为s或ms
过渡效果执行的时间曲线函数：transition-timing-function

默认为ease
ease：开始慢，中间快，结束慢
linear：匀速
ease-in：开始慢，结束快
ease-out：开始快，结束慢
ease-in-out：开始慢，中间快，结束慢(和ease稍有区别)
cubic-bezier()：函数定义了一个贝塞尔曲线(Cubic Bezier)。
贝塞尔曲线曲线由四个点 P0，P1，P2 和 P3 定义。P0 和 P3 是曲线的起点和终点。P0是（0,0）表示初始时间和初始状态，P3是（1,1）表示最终时间和最终状态。
需要给此函数传递P1，P2代表两个坐标点：cubic-bezier(x1,y1,x2,y2)
x1 和 x2 的取值范围0 到 1 之间的数字。
过渡延时执行时间：transition-delay

默认为0，不延时
单位为s或ms
简写中各项的顺序

transition(transition-property transition-duration transition-timing-function transition-delay)
默认值： transition: all 0 ease 0;

动画：animation

对比过渡，过渡只有开始帧和结束帧，中间动画由浏览器完成
而动画可以设置多个关键帧，更加精确的控制元素样式的变化过程
创建动画：@keyframes规则

定义动画的名称：animation-name (必需)，和下面使用动画时候的动画名称对应
动画持续时间的百分比：keyframes-selector (必需)
0%-100%
from (和0%相同)
to (和100%相同)
一个或多个合法的CSS声明语句：css-styles (必需)
使用时候的动画名称：animation-name

keyframename：指定关键帧动画的名称
none：没有动画

动画周期所用时间：animation-duration

默认为0

动画效果执行的时间曲线函数：animation-timing-function

见上面过渡transition-timing-function属性。
元素初始状态与动画开始和结束状态的模式：animation-fill-mode

因为需要将元素的初始状态和动画的0%帧的元素样式分开，所以只有延时情况下才能看出这个属性值的作用
默认为none: 保留初始状态，不保留100%帧状态
forwards: 保留初始状态，保留100%帧状态
backwards: 不保留初始状态(会立即变为0%帧的样式)，不会保留100%帧状态
both: 不保留初始状态，会保留100%帧状态

动画延时执行时间：animation-delay

默认为0
动画播放次数：animation-iteration-count

默认为1
动画在下一个周期动画播放方向：animation-direction

normal：普通，默认值。按正常播放动画
reverse：反转，反向播放动画
alternate：轮询，在奇数次正向播放动画，偶数次反向播放动画
alternate-reverse：反转轮询，在奇数次反向播放动画，偶数次正向播放动画
动画是否正在运行或暂停：animation-play-state

默认为running

running：默认值，运行动画
paused：暂停动画
简写中各项的顺序

animation(animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state)

内容总结

以上是互联网集市为您收集整理的CSS3-2D变换与3D变换、过渡与动画一文全搞定全部内容，希望文章能够帮你解决CSS3-2D变换与3D变换、过渡与动画一文全搞定所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---