CSS 3 3D 转换_html/css_WEB-ITnose

3D转换时，要赋予改变元素的父元素 perspective 属性

perspective： m px; // 视点和画面的距离，视点的位置默认在父元素的中心

perspective-origin：right top;//改变视点的位置

transform-orgin:   // 

backface-visibility: hidden / visible(默认)

========================================================================================

使用 transform 属性将 HTML 元素在三维空间内

1.旋转 rotate

       rotateX(角度)

       rotateY(角度)

       rotateZ(角度)

       rotate3d(x,y,z,角度) //

2.移动 translate

translateX(长度)

translateY(长度)

translateZ(长度)

translate3d(x,y,z,角度)

3.缩放 scale

scaleX(x)

scaleY(y)

scaleZ(z)

scale3d(x,y,z)

==================================================================================

transform-style: flat //默认，子元素将不保留其3D位置

preserve-3d; //子元素将保留其3D位置