Css3 - transform（变形）
2019-11-04 本文已影响0人
ElricTang
一.2D转换
| 属性 | 描述 |
|---|---|
| transform | 2D或3D转换 |
| transform-origin | 设置变换中心（rotate常用） |
| 变换函数 | 描述 | 例子 |
|---|---|---|
| translate(x,y) | X轴或Y轴移动 | transform:translate(100px,100px)，transform:translate(100px)，transform:translate(0,100px) |
| translateX(n) | X轴移动 | transform:translateX(100px) |
| translateY(n) | Y轴移动 | transform:translateY(100px) |
| scale(x,y) | 宽高缩放 | transform:scale(1.2)，transform:scale(1,1.3) |
| scaleX(n) | 缩放宽度 | transform:scaleX(1.3) |
| scaleY(n) | 缩放高度 | transform: scaleY(1.3) |
| rotate( n deg) | 旋转，可配合transform-origin设置旋转中心 | transform:rotate(360deg) |
| skew(x deg,y deg) | X轴，Y轴倾斜 | transform:skew(20deg,0)，transform:skew(0,-10deg) |
| skewX(x deg) | X轴倾斜 | transform: skewX(10deg) |
| skewY(y deg) | Y轴倾斜 | transform: skewY(10deg) |
| matrix(n,n,n,n,n,n) | 合并2D转换方法 | transform:matrix(0.866,0.5,-0.5,0.866,0,0) |
二.3D转换
| 属性 | 描述 |
|---|---|
| transform | 2D或3D转换 |
| transform-origin | 设置变换中心（rotate常用） |
| transform-style | 规定被嵌套元素如何在 3D 空间中显示 |
| perspective | 规定 3D 元素的透视效果 |
| perspective-origin | 规定 3D 元素的底部位置 |
| backface-visibility | 定义元素在不面对屏幕时是否可见 |
| 变换函数 | 描述 |
|---|---|
| translate3d(x,y,z) | 3D 转化 |
| translateX(x) | 3DX轴转换 |
| translateY(y) | 3DY轴装换 |
| translateZ(z) | 3DZ轴转换 |
| scale3d(x,y,z) | 3D缩放 |
| scaleX(x) | X轴3D缩放 |
| scaleY(y) | Y轴3D缩放 |
| scaleZ(z) | Z轴3D缩放 |
| rotate3d(x,y,z,angle) | 3D旋转 |
| rotateX(angle) | X轴3D旋转 |
| rotateY(angle) | Y轴3D旋转 |
| rotateZ(angle) | Z轴3D旋转 |
| perspective(n) | 调整视距，透视效果 |
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 3D 转换，使用 16 个值的 4x4 矩阵 |
