前端学习第十五天

2D转换/二维坐

平移属性transform：
移动translate（X,Y 数值）
单独移动后面数值不能为零
translateX/Y（数值）
不会影响其他元素位置 
移动单位为百分比他移动的距离是盒子的自身的宽度和高度来对比的 
对行内元素不起效果
Y轴坐标系朝下为正
X轴坐标系朝右为正

旋转

属性transform：
旋转：rotate（deg 度数 负值逆时针，正值顺时针）
rotateX（X轴上下逆时针旋转）
rotateY（Y轴左右顺时针旋转）

转化的基点

属性transform：
调整元素的参照点
origin：（x y）空格隔开
可以给像素可以给方向

缩放

属性：transform
scaleX：（数值）
scaleY：（数值）
scaleX:(数值)，scaleY；（数值）
scale：（数值）一起缩放
默认值为0，鼠标经过时为1可以实现隐藏出现的效果

倾斜

属性：transform
skewX：左右方向变化拉伸
skewY：上下方向变化拉伸

3D效果实现

transform-style: flat | preserve-3d；

指定嵌套元素如何在3D空间中呈现

A. preserve-3d：表示所有子元素在3D空间中呈现。

B. 注意：transform-style属性需要设置在父元素中，并且高于任何嵌套的变形元素