CSS的transform属性及其使用案例

一、transform是什么？

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

1.translate（位移）

translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）

translateX(x)仅水平方向移动（X轴移动）

translateY(Y)仅垂直方向移动（Y轴移动）

语法：Transform：translateX(apx) / translateY(bpx) / translateZ(cpx);

简写： transform：translate（apx，bpx，cpx）；

案例：

给盒子添加transform：translateX(100px);

给盒子添加transform：translateY(100px); 

 由于translateZ是沿着z轴，所以平面观察是无法看出效果的

2.scale（缩放）

语法：transform：scale（x, y）；默认x和y的值为1

transform：scale（1.5）；

表示元素放大1.5倍，如果要缩小0.5倍就将设为0.5即可

也可以单独设置x轴的缩放和y轴的缩放，也可以将数值设置为负数

transform：scale（-1）；效果：

 3.rotate（旋转）

transform：rotateX/rotateY/rotateZ；/*rotate（旋转）*/

rotateX（30deg）表示元素沿着x轴做旋转，30deg表示要沿着x轴方向的 顺时针旋转30度，将值设为负数则是逆时针旋转30度。

单独设置的话  例如：

transform：rotateX(10deg)   沿X轴旋转

transform：rotate(10deg)   顺时针旋转

4.origin (旋转中心点)

语法：

transform-origin: x y;

默认的情况下是中心点旋转也就是：

transform-origin: center center;

案例：

.box{
    width: 100px;
    height: 100px;
    background-color: red;
    margin: 0 auto;
    transform: rotate(45deg);
    transform-origin: 0px 0px;
    /* transform-origin: center; */
}

.box{
    width: 100px;
    height: 100px;
    background-color: red;
    margin: 0 auto;
    transform: rotate(45deg);
    transform-origin: 0px 0px;
    /* transform-origin: center; */
}

效果：

原点（旋转圆心）位置如图黄色箭头与黄色椭圆圈

5.skew (倾斜 )

默认围绕x轴倾斜

transform:skew(10deg);
 
transform:skew(10deg,50deg);
 
transform:skewX(50deg);
 
transform:skewY(50deg);