使用CSS3创建简单的3D场景
创建场景
rotate(旋转)、skew(扭曲)、scale(缩放)、translate(移动)
perspective;perspective-origin
transform:
translate平移 rotate旋转
translateX(x px) retateX(x deg)
[transform-style:preserve-3d]意思是transform操作是对3D进行的
transfom-origin 调整旋转中心
x轴left center right
y轴 top center bottom
z轴 length px
transition: <过渡属性名称><过渡时间><过渡模式>
-weebkit-transition Safari、chrome
-moz-transition Firefox
-o-transition Opera
过渡模式:
ease 缓慢开始缓慢结束
linear 匀速
ease-in 缓慢开始
ease-out 缓慢结束
ease-in-out
颜色变色1s:
-weebkit-transition: color 1s
Draw
context.moveTo(x,y) 一个点
context.lineTo(x,y) 画线
context.lineWidth 线条宽度
context.strokeStyle 线条颜色
context.fillStyle 填充颜色
context.stroke() 绘制线条
context.fill() 绘制填色块
context.beginPath() 开始绘制一段
context.closePath 结束
Draw an arc
context.arc(centerx,centery,radius,startingAngle,endingAngle,anticlockwise=false)
参数分别对应圆心x、y值、半径、开始弧度、结束弧度、顺/逆时针
其中无论顺/逆时针,0.5π的位置不会变
Animation
setInterval(
function(){
render()
uppdate()
},50)
context.clearRect (x,y,width,height)
对空间内的矩形图像刷新
context.canvas
找到上下文对应的画布
- 本文作者: Raphael_Li
- 本文链接: https://lifei-2019.github.io/3d特效/
- 版权声明: 本博客所有文章除特别声明外,均采用 Apache License 2.0 许可协议。转载请注明出处!