note

Appearance

transform ​

https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform

一些单位：

  • deg：度(Degress）， 一个圆共 360 度
  • turn：圈（Turns），一个圆共 1 圈
  • grad：梯度（Gradians），一个圆共 400 梯度
  • rad：弧度（Radians），一个圆共 2π 弧度

rotate / 旋转 ​

相对原点中心逆时针旋转。

css
transform: rotate(0.5turn);

transform: rotate3d(1, 2, 3, 10deg);

transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
旋转(^_^)
0deg

rotate 也支持单独使用： https://developer.mozilla.org/zh-CN/docs/Web/CSS/rotate

skew / 扭曲 ​

css
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);

以其中心位置围绕着 X 轴和 Y 轴按照一定的角度倾斜。

扭曲(^_^)
x轴： 0deg
y轴： 0deg

分割线 demo：

scale / 缩放 ​

css
transform: scale(2, 0.5);
transform: scaleX(2);
transform: scaleY(0.5);

支持负数

缩放(^_^)
x轴： 0
y轴： 0

translate / 位移 ​

css
transform: translate(12px, 50%);
transform: translateX(2em);
transform: translateY(3in);

transform: translate3d(12px, 50%, 3em);
transform: translateZ(2px);
位移(^_^)
x轴： 0px
y轴： 0px

matrix ​

应用一个[a b c d e f]变换矩阵。

css
transform: matrix(1, 2, 3, 4, 5, 6);

transform: matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16);

transform-origin / 原点 ​

css
/* One-value syntax */
transform-origin: 2px;
transform-origin: bottom;

/* x-offset | y-offset */
transform-origin: 3cm 2px;

/* x-offset-keyword | y-offset */
transform-origin: left 2px;

/* x-offset-keyword | y-offset-keyword */
transform-origin: right top;

/* y-offset-keyword | x-offset-keyword */
transform-origin: top right;

/* x-offset | y-offset | z-offset */
transform-origin: 2px 30% 10px;

/* x-offset-keyword | y-offset | z-offset */
transform-origin: left 5px -3px;

/* x-offset-keyword | y-offset-keyword | z-offset */
transform-origin: right bottom 2cm;

/* y-offset-keyword | x-offset-keyword | z-offset */
transform-origin: bottom right 2cm;
(^_^)
：
：