1. 前言
本篇开始介绍Web2D和3D相关基础知识，会从CSS3的2D/3D转换、过渡、动画，讲到Canvas 2D图形绘制，再到SVG，最后到WebGL。
坐标系：左上点是坐标原点(0,0)，x轴正方向向右，y轴正方向向下，z轴正方向向外（垂直屏幕向外）。
2. 2D转换
CSS3的2D/3D旋转，适用左手定则确认顺时针方向和逆时针方向（角度值是顺正逆负）
|----------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------|
| css函数 | 说明 | 示例 |
| translate(x,y) | 定义2D转换，沿着X和Y轴移动 | div { transform:translate(10px, 20px); } |
| translateX(x) | 定义2D转换，沿着X轴移动 | div { transform:translate(10px, 20px); } |
| translateY(y) | 定义2D转换，沿着Y轴移动 | div { transform:translate(10px, 20px); } |
| rotate(angle) | 定义2D旋转，angle是旋转角度，正值-顺时针，负值-逆时针，旋转轴-穿过元素中心点、垂直于XY平面 | div { transform: rotate(30deg); } |
| scale(x,y) | 定义2D缩放转换，改变元素宽高 注：仅显示上变化了，元素实际尺寸没改变 | div { transform: scale(2,3); } |
| scaleX(n) | 定义2D缩放转换，改变元素宽度 | div { transform: scale(2,3); } |
| scaleY(n) | 定义2D缩放转换，改变元素高度 | div { transform: scale(2,3); } |
| skew(angleX, angleY) | 定义2D倾斜转换，沿着X和Y轴 注：不管怎么倾斜，元素中心点不变 | div { transform:skew(15deg, 20deg); } |
| skewX(angle) | 定义2D倾斜转换，沿着X轴 正值-X轴正方向往负方向推 负值-X轴负方向往正方向推 | div { transform:skew(15deg, 20deg); } |
| skewY(angle) | 定义2D倾斜转换，沿着Y轴 正值-Y轴正方向往负方向推-倾斜 负值-Y轴负方向往正方向推-倾斜 | div { transform:skew(15deg, 20deg); } |
| matrix(n,n,n,n,n,n) | 定义2D转换，6值矩阵 | |
| |||
| transform-origin | 更改变换的参考源（参数点），默认是元素的中心点 transform-origin: x-axis y-axis z-axis; x-axis: left | center | right | length | % y-axis: top | center | bottom | length | % z-axis: length 定义视图置于Z轴何处 | x-axis,y-axis在元素自身中定位参考源位置 0% 0% 表示元素左上角 |
3. 3D转换
|------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------|-------|
| css函数 | 说明 | 示例 |
| translate3d(x,y,z) | 定义3D转换，沿着X、Y和Z轴移动 | <略> |
| translateX(x) | 定义3D转换，沿着X轴移动 | <略> |
| translateY(y) | 定义3D转换，沿着Y轴移动 | <略> |
| translateZ(z) | 定义3D转换，沿着Z轴移动 | <略> |
| rotate3d(x,y,z,angle) | 定义3D旋转，绕(x,y,z)旋转 | <略> |
| rotateX(angle) | 定义3D旋转，绕着X轴旋转 | <略> |
| rotateY(angle) | 定义3D旋转，绕着Y轴旋转 | <略> |
| rotateZ(angle) | 定义3D旋转，绕着Z轴旋转 | <略> |
| scale3d(x,y,z) | 定义3D缩放， | <略> |
| scaleX(x) | 定义3D缩放， | <略> |
| scaleY(y) | 定义3D缩放， | <略> |
| scaleZ(z) | 定义3D缩放， | <略> |
| matrix(n,n,n,n,n,n,n,n, n,n,n,n,n,n,n,n) | 定义3D转换，16值矩阵 | <略> |
| perspective(n) | 定义3D转换元素的透视视图 | <略> |
| 相关CSS属性 |||
| css属性 | 描述 | 示例 |
| transform-origin | 更改变换的参考源（参数点） | <略> |
| transform-style | 嵌套元素如果在3D空间中显示 1. flat 表示所有子元素在2D平面呈现 2. preserve-3d 表示所有子元素在3D空间中呈现 | <略> |
| perspective | 3D元素的透视效果，设置在父元素上 1. number 元素距离视图的距离，以像素计 2. none 不设置透视 | <略> |
| perspective-origin | 3D元素的底部位置 perspective-origin: x-axis y-axis x-axis: left | center | right | length | % y-axis: top | center | bottom | length | % | <略> |
| backface-visibility | 元素不面对屏幕时是否可见 1. visible 背面可见 2. hidden 背面不可见 | <略> |
4. 过渡
|----------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------|
| css属性 | 描述 | 示例 |
| transition | transition: property duration time-function delay是简写 | div { transition: width 2s ease 1s, height 3s linear 2s; } |
| transition-property | 指定css属性的过渡效果 1. none 没有属性会获得过渡效果 2. all 所有属性应用过渡效果 3. property 使用过渡效果的css属性，多个时用逗号,分隔 | div { transition: width 2s ease 1s, height 3s linear 2s; } |
| transition-duration | 过渡效果花费时间 1. time 完成过渡效果需要花费的时间（秒或毫秒），0值时则无过渡效果 | div { transition: width 2s ease 1s, height 3s linear 2s; } |
| transition-timing-function | 过渡效果的速度 1. linear 以相同速度开始直到结束，cubic-bezier(0,0,1,1) 2. ease 先慢中快后慢，cubic-bezier(0.25, 0.1, 0.25,1) 3. ease-in 先慢后平滑，cubic-bezier(0.42,0,1,1) 4. ease-out 先平滑后慢，cubic-bezier(0,0,0,58,1) 5. ease-int-out 先慢中平滑后慢，cubic-bezier(0.42,0,0.58,1) 6. cubic-bezier(n,n,n,N) 自定义速度 | div { transition: width 2s ease 1s, height 3s linear 2s; } |
| transition-delay | 过渡效果何时开始 1. time 指定秒或毫秒数之前要等待过渡效果开始 | div { transition: width 2s ease 1s, height 3s linear 2s; } |
5. 动画
|---------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| css属性 | 描述 | 示例 |
| @keyframes | 定义关键帧动画 1. 使用from to定义关键帧 @keyframes myFirst { from { ...... } to { ...... } } 2. 使用百分比%定义关键帧 @keyframes myFirst { 0% { ...... } 30% { ...... } 70% { ...... } 100% { ...... } } | @keyframes myFirst { 0% { background: red; left:0px; top:0px; } 25% { background: yellow; left:200px; top:0px; } 50% { background: blue; left:200px; top:200px; } 75% { background: green; left:0px; top:200px; } 100% { background: red; left:0px; top:0px; } } |
| animation | animation: name duration timing-function delay iteration-count direction fill-mode play-state;的简写 | div { animation-name: myfirst; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; } |
| animation-name | 1. 指定关键帧动的名称，由@keyFrames定义的 2. none 没有指定动画 | div { animation-name: myfirst; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; } |
| animation-duration | 1. time 动画完成一个周期需要花费时间（秒或毫秒），0值时则无动画效果 | div { animation-name: myfirst; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; } |
| animation-timing-function | 动画效果速度曲线 1. linear 以相同速度开始直到结束，cubic-bezier(0,0,1,1) 2. ease 先慢中快后慢，cubic-bezier(0.25, 0.1, 0.25,1) 3. ease-in 先慢后平滑，cubic-bezier(0.42,0,1,1) 4. ease-out 先平滑后慢，cubic-bezier(0,0,0,58,1) 5. ease-int-out 先慢中平滑后慢，cubic-bezier(0.42,0,0.58,1) 6. cubic-bezier(n,n,n,N) 自定义速度 7. steps(int, start | end) | div { animation-name: myfirst; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; } |
| animation-delay | 动画效果何时开始 1. time 指定秒或毫秒数之前要等待动画效果开始 | div { animation-name: myfirst; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; } |
| animation-iteration-count | 动画被播放的次数 1. number 2. infinite 一直重复播放 | div { animation-name: myfirst; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; } |
| animation-direction | 动画播放的方向 1. normal 正常播放 2. reverse 反向播放 3. alternate 奇数次正向，偶数次逆向 4. alternate-reverse 奇数次逆向，偶数次正向 5. initial 设置该属性为它默认值 6. inherit 从父元素继承 | div { animation-name: myfirst; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; } |
| animation-fill-mode | 动画不播放时，应用到元素的样式 1. none 默认 2. forwards 运用动画结束时的属性值 3. backwards 第一个迭代时第一帧的值 4. both 动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性 5. inital 设置该属性为它的默认值 6. inherit 从父元素继承 | div { animation-name: myfirst; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; } |
| animation-play-state | 1. paused 指定暂停动画 2. running 指定运行动画 JS操作会使用到 | div { animation-name: myfirst; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; } |
注：以上，如有不合理之处，还请帮忙指出，大家一起交流学习~