css3 transform转换

Posted 2022-12-12 orochiz-

1.先说说css的坐标系：

x轴的正方向就是水平向右的方向
y轴的正方向就是垂直向下的方向
z轴的正方向就是屏幕到用户的方向

2.位移

translate(x,y):2d位移
translateX(n) 设置x轴方向的位移
translateY(n) 设置y轴方向的位移

translate3d(x,y,z)：3d位移
translateZ(n) 设置z轴方向的位移

参数可以是具体的像素值，也可以是百分比（基于自己的宽高）

语法：

transform:translate(200px,0);

3.缩放

scale(x,y) 2d缩放，如果只传了一个值，则表示x,y都是这个值
scaleX(n) 设置x轴方向的缩放
scaleY(n) 设置y轴方向的缩放

scale3d(x,y,z) 3d缩放

语法：

transform:scale(2);

3.旋转

rotate() 2d旋转,顺时针方向

rotate3d(x,y,z) 3d旋转
rotateX(angle) 围绕x轴旋转
rotateY(angle) 围绕y轴旋转
rotateZ(angle) 围绕z轴旋转

语法：

transform:rotate(45deg)

要实现3d视角，需要设置

/* 3d模式 */
transform-style: preserve-3d;
/* 视距 */
perspective: 1200px;

rotateX效果

transform:   rotateX(360deg);

rotateY效果

transform:   rotateY(360deg);

rotateZ效果

transform:   rotateZ(360deg);

4.transform-origin

这个属性用来设置元素transform时的基点，默认为元素的中心，也就是center center
他的值有以下几种：
具体数值 例如50px 50px
关键字 left right top bottom center
百分比 20% 20%（基于元素大小）

我们前面的旋转的例子就是基于元素中心进行旋转的

将转换基点修改成左上角

transform-origin: 0 0;

5.scale与translate共用

如果scale()在前在前，则实际位移 = 设定的位移 * scale的倍数
建议translate写在前面

transform: translate(300px,0) scale(2) ;
//以 容器的中心点来计算，容器位移了300px

transform: scale(2) translate(200px,0);
//以 容器的中心点来计算，容器位移了400px
transform: scale(3) translate(100px,0);
//以 容器的中心点来计算，容器位移了300px
transform: scale(0.5) translate(200px,0);
//以 容器的中心点来计算，容器位移了100px

6.translate()和rotate()共用

rotate()写在translate前面的话会改变坐标系，从而改变translate的设定，所以是要是设置多值的话，建议把translate()写在前面