博客

2D转换transform

所谓2D转换，就是在二维坐标系内进行各种操作，包括平移，转动，缩放等等；

平移

语法：

transform:translate(x, y);

transform:translateX(x);

transform:translateY(y);

x和y都是相对于屏幕左上角而言，左上为负值，右下为正值；与传统数学坐标系注意区分

要实现盒子的平移，目前有多种方式

• margin
• 定位
• translate
• 父盒子的 padding

注意点：

1. translate
   
   不影响其他元素位置
   
   ，和相对定位类似，不脱离文档流。
2. translate 使用
   
   百分比
   
   时，是相对自身宽高而言，
   
   而不是相对父盒子的宽高
   
3. 位移只针对行内块和块级元素有效；
   
   行内元素不适用
   
   。
4. 
   位移覆盖显示
   
   优先级
   
   ：
   
   • 有位移的覆盖无位移的
   • 都有位移时，后面定义的元素覆盖前面的元素

利用平移百分比优化盒子水平垂直居中

之前是定位之后，往回平移盒子的尺寸的一半，实现；如下

position: absolute;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
background-color: #ee20ee;
margin-left: -50px;
margin-top: -50px;

如果盒子尺寸一旦变化，margin的值也要跟着改动，如果使用平移 50% 实现，就无需改动。

position: absolute;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
background-color: #ee20ee;
transform: translate(-50%, -50%);

旋转

绕着

哪个轴

旋转

语法：

transform:rotate(45deg); // 默认相当于

rotateZ


transform:rotateX(45deg);

transform:rotateY(45deg);

transform:rotateZ(45deg);

transform:rotate3d(x, y, z, 180deg); // 从3维原点到指定3维坐标点（x,y,z）连接的线旋转 180度。

旋转几度，

默认旋转点为盒子中心点

transform:rotate(45deg);

同样，旋转也只对

块级元素

和

行内块

有效

指定2d变换的中心点 transform-origin

旋转点坐标 中间是空格

不是逗号



包括

缩放和旋转的中心点都可以通过这个属性设置


语法：

transform-origin: x y; // 指定Z轴旋转（2d旋转）中心点

除了给定像素值，还可以指定方位：top，bottom，left，right，center

transform-origin: 10px 10px;

示例

.c1 {
    background-color: #e6393c;
    transition: all 0.5s;
    transform-origin: left bottom;
}

.c1:hover {
    transform: rotate(45deg);
}

缩放

设置盒子的尺寸在指定方向上缩放

指定倍数

（整数小数均可）

语法：

transform:scale(x, y); # 分别设置x，y轴方向尺寸

transform: scale(a); # 统一设置设置x，y轴方向尺寸为同一个值

transform:scaleX(x); # 设置x轴方向尺寸

transform:scaleY(y); # 设置y轴方向尺寸

transform:scaleZ(z); # 设置z轴方向尺寸

transform: scale3d(2, 2, 2); 分别设置 xyz 三个方向的上的扩缩比

# 以下三者等价
transform: scale(2);
transform: scaleX(2) scaleY(2);
transform: scale(2, 2);

2d转换简写

先后顺序为：位移 → 旋转 → 缩放

transform: translate() rotate() scale() 

由于位移会影响坐标，因此需将位移放在最前面。