1.了解3D转3D的特点。近大、远、小物体和表面遮挡都看不见。注：y轴底部为正值，顶部为负值。Z轴：竖屏--注：外侧为正值，内侧为负值。2.3D转换3D转换知识点3D位移：translate3d(x,y,z)3D旋转：rotate3d(x,y,z)透视：perspctive3D呈现transfrom-style3D运动translate3d3D运动是在2D移动，也就是z轴方向transform:translateX(100px):onlymoveonthexaxistransform:translateY(100px):onlymoveonyaxistransform:translateZ(100px):onlyonthezaxistransform:translate3d(x,y,z):其中x,y,z分别指的是要移动的轴方向的距离。注意：x、y、z对应的值不能省略，也不需要填写。用0填写。语法transform:translate3d(x,y,z)代码演示transform:translate3d(100px,100px,100px)/*注意：x,y,z对应的值不能省略，它们不需要填充0*/transform:translate3d(100px,100px,0)要在网页上产生3D效果，透视（理解为3D物体投影的2D平面）实际上是模仿人的视觉位置，这可以看作是安排眼睛看的视角，也称为观看距离。所谓观看距离就是人眼到屏幕的距离，屏幕离视点越近，计算机平面上的图像越大，越远图像越小。透视的单位是像素。透视的关键点需要写在被检查元素的父框上。注意下图d：是视距，视距指的是人眼到屏幕的距离z：是z轴，z轴越大（正值），我们看到的物体越大看代码演示body{perspective:1000px;}4.translateZtranslateZ和perspectiveperspe的区别citve设置了父级别，translateZ为子元素设置了不同的大小。5.3D旋转rotateX3D旋转是指元素可以在三维平面中沿x轴、y轴、z轴或自定义轴旋转语法变换：rotateX(45deg)--沿旋转45度正x轴变换：rotateY(45deg)--沿正y轴旋转45度变换：rotateZ(45deg)--沿正z轴旋转45度变换：rotate3d(x,y,z,45deg)--沿自定义轴旋转45度为角度代码示例div{perspective:300px;}img{display:block;边距：100px自动；transition:all1s;}img:hover{transform:rotateX(-45deg)}左手定则左手大拇指指向x轴正方向，其余手指弯曲方向为元素沿x轴旋转的方向。6.3D旋转rotateY代码演示div{perspective:500px;}img{display:block;边距：100px自动；transition:all1s;}img:hover{transform:rotateY(180deg)}左手定则左手大拇指指向y轴正方向，其余手指弯曲方向沿元素的方向沿y轴旋转的方向（正值）VII.3D旋转rotateZ代码演示div{perspective:500px;}img{display:block;边距：100px自动；transition:all1s;}img:hover{transform:rotateZ(180deg)}rotate3dtransform:rotate3d(x,y,z,deg)--沿自定义轴旋转deg，角度x,y,z表示向量rotationaxis，也就是标识是否要沿着这个轴旋转的向量，最后一个标识旋转的角度transform：rotate3d(1,1,0,180deg)--along对角旋转45degtransform:rotate3d(1,0,0,180deg)--沿x轴旋转45degcodedemodiv{perspective:500px;}img{display:block;边距：100px自动；过渡：全1；}img:hover{transform:rotate3d(1,1,0,180deg)}8.3D渲染transform-styletransform-style-控制子元素是否启用三维环境-`transform-style:flat`表示子元素不启用`3D`三维空间，默认-`transform-style:preserve-3d`子元素启用三维空间-代码写到parent，但是影响childbox
