1、HTML5像素文字爆炸重组动画特效 今天我们要分享一款基于HTML5技术的文字像素爆炸重组动画特效,我们可以在输入框中指定任意文字,点击确定按钮后,就会将原先的文字爆炸散去,新的文字以像素点的形式
顺晟科技
2022-09-14 10:59:51
245
2D页面即是在浏览器中开发的页面,
3D可以比喻浏览器为窗口,透过浏览器看到3D物体
一、设置3D场景
perspective:800【3D世界中的物体距3D场景的距离800px】
perspective-origin:50% 50%【从浏览器观察的入口,X轴50%,Y轴50%,即从场景中央透过场景看3D世界】
二、展示3维效果
使用transform属性调整元素
因为transfrom也适应于2D场景中,所以为了使用浏览器知道此transfrom用于3D场景需要首页设置transfrom属性
transfrom-style:preserve-3d
——translate【位移操作】
· translateX(x px)
· translateY(y px)
· translateZ(z px)
——rotate【旋转操作】
· rotateX(x deg)
· rotateY(y deg)
· rotateZ(z deg)
在浏览器3D世界中
X轴向右是正方向,Y轴向下是正方向 ,Z轴向外【指向我们】的是正方向
14
2022-09
14
2022-09
14
2022-09
14
2022-09
13
2022-09
13
2022-09