前端学习之路01-WTL（transform、内外边距）

1：内外边距

• padding-内边距（盒子内的文字距离盒子各边界的值）
• margin-外边距（盒子外距离页面边界的值）
• 

2：transform属性

（1）translate：从三个层面（一维，二维，三维）改变盒子的方位。

• transform：translateX(x px);(改变x轴上的盒子的位置)
• transform：translateY(y px);(改变y轴上的盒子的位置)
• transform：translateZ(z px);(改变z轴上的盒子的位置)
• transform:translate(x px,y px);（从x轴和y轴，从平面上改变盒子的位置）
• transform：translate3d(x px,ypx,zpx);（从三维层面改变平面盒子的位置）

（2）scale：对盒子进行缩放

• transform：scaleX（x ）;（对盒子进行x轴上的缩放）
• transform：scaleY（x ）;（对盒子进行y轴上的缩放）
• transform：scaleZ（x ）;（对盒子进行z轴上的缩放）
• transform：scale（x,y）;(对盒子进行二维平面的拉伸)
• transform：scale3d（x，y，z）;(对盒子进行三维平面的拉伸)

（3）rotate：对盒子进行旋转

transform：rotateX（x deg）;（对盒子进行x轴上旋转，径直向前推到一个东西）

transform：rotateY（x deg）;（对盒子进行y轴上的旋转）

transform：rotateZ（x deg）;（对盒子进行z轴上的旋转）

transform：rotate（x deg，y deg）（盒子在二维平面上进行旋转）

transform：scale3d（x deg，y deg，z deg）;(对盒子进行三维平面的旋转)

（4）skew：从盒子的左前方视角，盒子进行旋转

• transform：skewX（x deg）;（对盒子进行x轴上旋转）
• 
• transform：skewY（x deg）;（对盒子进行y轴上的旋转）
• transform：skew（x deg，y edg）;（对盒子进行y=x轴上的旋转）

（5）perspective：为3d转换元素定义透视视图