-
-
- 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(默认,拉伸的)