23 d弹性总结

1. 1. 1. 2D变换和3D变换的总结对比：

实际上，2D变换和3D变换并没有本质的区别，无非是3D变换多出了一些变换函数（方式）。

而原来的2D变换函数也都照样可以用（毕竟2D变换无非只是在x-y平面上进行，不涉及z轴）。

 

变换方式	2D变换可用函数	3D变换可用函数
位移变换： 单位：px	translateX(x)	translateX(x)
	translateY(y)	translateY(y)
	translate(x, y)	translate(x, y)
		translateZ(z)
		translate3d(x, y, z)
缩放变换： 单位：无	scaleX(x)	scaleX(x)
	scaleY(y)	scaleY(y)
	scale(x, y)	scale(x, y)
		scaleZ(z) *
		scale3d(x, y, z)
旋转变换： 单位：deg	rotate(z)	rotate(z)
		rotateX(x)
		rotateY(y)
		rotateZ(z)
		rotate3d(Dx, Dy, Dz, deg) **
斜拉变换： 单位：deg	skewX(x)	skewX(x)
	skewY(y)	skewY(y)
	skew(x, y)	skew(x, y)
【其他非函数设定】	transform-origin:变换原点	transform-origin:变换原点
	ransform-style: plat;	transform-style: preserve-3d;
		perspective: 透视距离
		perspective-origin: 透视点

注：

* 由于盒子是没有厚度的，因此scaleZ其实是无效的。

** Dx，Dy，Dz是3个数字，代表一个向量的方向。向量就是从原点出发到某个点的一条有向线。

 

弹性布局flex：

3个基本设置：

display: flex;

flex-direction: row, row-reverse, column, column-reverse

flex-wrap: wrap, nowrap(默认值), wrap-reverse

3个布局设置（针对的是子盒子，但设置在父盒子上）：

水平方向的多个子盒子在主轴方向的布局形式：

justify-content: flex-start,  flex-end,  center,  space-between,  space-around;

多行在辅轴方向的布局形式：

align-content: flex-start,  flex-end,  center,  space-between,  space-around;

在一行中多个子盒子在辅轴方向的排布形式：

align-items: flex-start, flex-end, center, baseline, stretch（默认，拉伸的）