程序员好web前端系列CSS3-3D，什么是3d场景？在2d场景中，屏幕上水平和垂直交叉线的x轴和y轴。在3d场景中，在垂直于屏幕的方法中，相对于3dZ轴多了一个z轴：靠近屏幕的方向为正，远离屏幕的方向为Reverse3DtransformationinCSS3主要包括以下功能函数：3D位移：CSS3中的3D位移主要包括两个功能函数，translateZ()和translate3d()；3D旋转：CSS3中的3D旋转主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四个功能函数；3D缩放：CSS3中的3D缩放主要包括scaleZ()和scale3d()两个功能函数；生活中的景深3d和2d几乎不一样大距离小景深程序中实现的方法透视元素与视线的距离（物体与眼睛的距离越小，近、大、远效果明显)perspective:1200px;（在父元素中使用）transform:perspective(1200px)（在子元素中使用）两种设置都会冲突。建议只设置父元素。通常值在900-1200之间。如果你的视线离物体足够远，基本上不会有近距离远小的感觉perspective-origin；(位置)观察3d元素的角度perspective-origin:centercenter(center)perspective-origin:lefttop(左上角)perspective-origin:100%100%(bottomrightcorner)transform-styleAttributetransform-style属性是3D空间的一个重要属性，指定嵌套元素在3D空间中的呈现方式。它主要有两个属性值：flat和preserve-3d，其中flat值为默认值，表示所有的子元素都呈现在一个2D平面上。preserve-3d表示所有子元素都在3D空间中渲染。也就是说，如果某个元素的transform-style的值设置为flat，则该元素的所有子元素都会被展平到该元素的二维平面上进行展示。沿X或Y轴旋转元素将导致正或负Z位置的子元素出现在元素的平面中，而不是在元素的前面或后面。如果某个元素的transform-style值设置为preserve-3d，则表示不执行扁平化操作，其所有子元素都位于3D空间中。3d重要函数功能1.3D位移在CSS3中，3D位移主要有两个函数translateZ()和translate3d()。translate3d()函数在三维空间中移动元素。语法：translate3d(tx,ty,tz)tx：表示水平坐标位移向量的长度；ty：表示垂直坐标位移矢量的长度；tz：表示Z轴位移矢量的长度。该值不能是百分比值。如果它是一个百分比值，它将被认为是一个无效值。ranslateZ()函数的作用是在3D空间中沿Z轴位移元素。语法：translateZ(t)t：指Z轴的矢量位移长度。2.3D旋转在3D变形中，我们可以在任意轴上旋转元素。为此，CSS3添加了三个新的旋转函数：rotateX()、rotateY()、rotateZ()和rotate3d(x,y,z,a)。rotateX(a)rotateX()函数指定一个元素绕X轴旋转，旋转量定义为指定的角度；如果值为正，则元素绕X轴顺时针旋转；否则，如果值为负，则元素围绕X轴逆时针旋转。rotateY(a)rotateY()函数指定一个元素绕Y轴旋转，旋转量定义为指定的角度；如果值为正，则元素绕Y轴顺时针旋转；否则，如果值为负，则元素绕Y轴逆时针旋转。rotateZ(a)rotateZ()函数和其他两个函数一样，不同的是rotateZ()函数指定一个元素绕Z轴旋转。rotate3d(x,y,z,a)x：是0到1之间的一个值，主要用来描述元素绕X轴旋转的向量值；y：是0到1之间的一个值，主要用来描述元素绕Y轴旋转的向量值；z：是0到1之间的一个值，主要用来描述元素绕Z轴旋转的向量值；a：是一个角度值，主要用来指定元素在3D空间中旋转的角度，如果值为正，则元素顺时针旋转，否则元素逆时针旋转。3.3D缩放CSS33D变形中的缩放主要有两个函数：scaleZ()和scale3d()。当scale3d()中的X轴和Y轴都为1时，即scale3d(1,1,sz)时，在scaleZ(sz)处效果是一样的。通过使用3D缩放功能，您可以使元素在Z轴上按比例缩放。默认值为1，当该值大于1时，元素放大。否则，当该值小于1且大于0.01时，元素缩小scale3d(sx,sy,sz)sx：水平缩放;sy：垂直缩放；sz：Z轴缩放比例；scaleZ(s)s：指定元素各点在Z轴上的比例。注意：scaleZ()和scale3d()函数单独使用是没有效果的，需要和其他变形函数一起使用才有效果
