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轴移动translateY(y)定义2D转换，沿着Y轴移动rotate(angle)定义2D旋转，angle是旋转角度，正值-顺时针，负值-逆时针，旋转轴-穿过元素中心点、垂直于XY平面
div {
transform: rotate(30deg);
}
scale(x,y)
定义2D缩放转换，改变元素宽高
注：仅显示上变化了，元素实际尺寸没改变
div {
transform: scale(2,3);
}
scaleX(n)定义2D缩放转换，改变元素宽度scaleY(n)定义2D缩放转换，改变元素高度skew(angleX, angleY)
定义2D倾斜转换，沿着X和Y轴
注：不管怎么倾斜，元素中心点不变
div {
transform:skew(15deg, 20deg);
}
skewX(angle)
定义2D倾斜转换，沿着X轴
正值-X轴正方向往负方向推
负值-X轴负方向往正方向推
skewY(angle)
定义2D倾斜转换，沿着Y轴
正值-Y轴正方向往负方向推-倾斜
负值-Y轴负方向往正方向推-倾斜
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空间中显示
flat 表示所有子元素在2D平面呈现
preserve-3d 表示所有子元素在3D空间中呈现
<略>perspective
3D元素的透视效果，设置在父元素上number 元素距离视图的距离，以像素计
none 不设置透视
<略>perspective-origin
3D元素的底部位置
perspective-origin: x-axis y-axis
x-axis: left | center | right | length | %
y-axis: top | center | bottom | length | %
<略>backface-visibility
元素不面对屏幕时是否可见
visible 背面可见
hidden 背面不可见
<略>4. 过渡
css属性描述示例transitiontransition: property duration time-function delay是简写
div {
transition: width 2s ease 1s, height 3s linear 2s;
}
transition-property
指定css属性的过渡效果
none 没有属性会获得过渡效果
all 所有属性应用过渡效果
property 使用过渡效果的css属性，多个时用逗号,分隔
transition-duration
过渡效果花费时间time 完成过渡效果需要花费的时间（秒或毫秒），0值时则无过渡效果
transition-timing-function
过渡效果的速度linear 以相同速度开始直到结束，cubic-bezier(0,0,1,1)
ease 先慢中快后慢，cubic-bezier(0.25, 0.1, 0.25,1)
ease-in 先慢后平滑，cubic-bezier(0.42,0,1,1)
ease-out 先平滑后慢，cubic-bezier(0,0,0,58,1)
ease-int-out 先慢中平滑后慢，cubic-bezier(0.42,0,0.58,1)
cubic-bezier(n,n,n,N) 自定义速度
transition-delay
过渡效果何时开始time 指定秒或毫秒数之前要等待过渡效果开始
5. 动画
css属性描述示例@keyframes
定义关键帧动画
- 使用from to定义关键帧
@keyframes myFirst {
from {
......
}
to {
......
}
}
- 使用百分比%定义关键帧
@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;
}
}
animationanimation: 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
指定关键帧动的名称，由@keyFrames定义的
none 没有指定动画
animation-durationtime 动画完成一个周期需要花费时间（秒或毫秒），0值时则无动画效果
animation-timing-function
动画效果速度曲线linear 以相同速度开始直到结束，cubic-bezier(0,0,1,1)
ease 先慢中快后慢，cubic-bezier(0.25, 0.1, 0.25,1)
ease-in 先慢后平滑，cubic-bezier(0.42,0,1,1)
ease-out 先平滑后慢，cubic-bezier(0,0,0,58,1)
ease-int-out 先慢中平滑后慢，cubic-bezier(0.42,0,0.58,1)
cubic-bezier(n,n,n,N) 自定义速度
steps(int, start | end)
animation-delay
动画效果何时开始time 指定秒或毫秒数之前要等待动画效果开始
animation-iteration-count
动画被播放的次数number
infinite 一直重复播放
animation-direction
动画播放的方向normal 正常播放
reverse 反向播放
alternate 奇数次正向，偶数次逆向
alternate-reverse 奇数次逆向，偶数次正向
initial 设置该属性为它默认值
inherit 从父元素继承
animation-fill-mode
动画不播放时，应用到元素的样式none 默认
forwards 运用动画结束时的属性值
backwards 第一个迭代时第一帧的值
both 动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性
inital 设置该属性为它的默认值
inherit 从父元素继承
animation-play-statepaused 指定暂停动画
running 指定运行动画
JS操作会使用到
下一篇：【Web2D/3D】SVG（第二篇）-CSDN博客
注：以上，如有不合理之处，还请帮忙指出，大家一起交流学习~
版权归原作者 古狼_guwolf 所有， 如有侵权，请联系我们删除。