2D和3D转换心得

转换

定义：改变位置、形状、尺寸{2D（XY轴）和3D（XYZ轴）}

2D：平面转换：平移（move）、倾斜（skew）、旋转（rotate）、缩放(scale)

3D：空间转换

属性：transform {2D、3D转换}

none{默认值不进行转换}

transform-function{平移缩放旋转倾斜的方式}

transform：rotate（45deg）

正值是顺时针，负值是逆时针

transform：skew(45deg)

负值是向右，正值反之，

transform:scale(0-1缩小,>1位放大)

transform:scale

(x,y)/scaleX/Y

transform-origin{默认情况：变形的中心点是元素的中心点；

写法

}

transform-style:作用：是页面以2D3D显示

Fiat：默认2D

preserve-3D:元素在3D空间展示；

特点：必须在父类元素中设置：preserve-3D；不然无法显示3D效果。