transform property
https://developer.mozilla.org/@api/deki/files/5796/=coord_in_R2.png
transform: none|transform-functions|initial|inherit; transform-functions: 实现transformation 的函数列表如下
- none 没有transformation效果
- matrix(n,n,n,n,n,n) 使用6个值matrix设置2d变形效果
- matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 使用16值4x4 matrix设置3d效果
- translate(x,y) 定义一个2d效果，向window 坐标轴的x,y两个方向移动
- translate3d(x,y,z) 定义一个3d效果,向window 坐标轴的x,y,z三个方向移动
- translateX(x) 只向x坐标轴方向移动
- translateY(y) 只向y坐标轴方向移动
- translateZ(z) 只向z坐标轴方向移动
- scale(x,y) 定义2d缩放，向x,y两个坐标轴方向缩放
- scale3d(x,y,z) 定义3d缩放，向x,y,z三个坐标轴方向缩放
- scaleX(x) 只向x坐标轴方向缩放
- scaleY(y) 只向y坐标轴方向缩放
- scaleZ(z) 只向z坐标轴方向缩放
- rotate(angle) 定义一个2d旋转，默认以元素的中心点作为旋转中心，顺时针旋转angle度
- rotate3d(x,y,z,angle) 定义一个3d旋转，以(x,y,z)指定的点为旋转中心
- rotateX(angle) 定义一个3d旋转,铙着x轴方向旋转 angle度
- rotateY(angle) 定义一个3d旋转，铙着y轴方向旋转 angle度
- rotateZ(angle) 定义一个3d旋转，铙着z轴方向旋转 angle度
- skew(x-angle,y-angle) 定义一个2d变形 ,分别朝x方向和y方向，扭曲angle度
- skewX(x-angle) 定义一个2d 变形,朝x方向扭曲angle度
- skewX(y-angle) 定义一个2d变形，朝y方向扭曲angle度
- perspective(n) 定义一个3d视口，使用于3d变形效果
matrix(a, b, c, d, tx, ty),其实是matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())的综合使用 matrix(a, b, c, d, tx, ty) is a shorthand for matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1).
matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) 参数 a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3 d4 是关于transformation的 a4 b4 c4 是关于translate的
定义元素旋转的中心点,默认是元素的中心点(center,center)|(50%,50%) transform-origin: x-axis y-axis z-axis|initial|inherit; paramers: x-axis: x轴方向，possible values:left|center|right|length|% y-axis: y轴方向，possible values:left|center|right|length|% z-axis: z轴方向, possible values: length (px,em,rem单位长度)
使子元素保留父元素的3d变化(例如父元素，rotateX(180deg),反转，则它的子元素也会同时rotateX(180deg))，必须设置成非叶子元素 paramers: flat 默认值 preserve-3d 给子元素设置3d效果