2D变换-1

「这是我参与2022首次更文挑战的第15天，活动详情查看：2022首次更文挑战」

前言

“不知道从什么时候开始，我逐渐丧失我热烈的分享欲，在情绪崩溃的边缘自我调节，我在孤独的境遇里一边失去一边成长！”今天大年初一，各位新年快乐呀！接下来会把我今天学到的一些小知识记录下来。

2D变换

2D变换常用的变换方式包括位移、旋转、缩放和斜切；分别是：

transform:translate(0,0);/* 位移 */
transform:rotate(0deg);/* 旋转 */
transform:scale(1);/* 缩放 */
transform:skew(0deg);/* 斜切 */

• translate()位移 它是以自身坐标为基准，进行水平方向或者垂直方向的位移，基础语法如下：

transform:translate(0,0);

其中translate()函数中的第二个参数值可以省略，省略后表示垂直方向的偏移大小是0;例如translate(20px)等价于translate(20px,0)，也等价于translateX(10px)。另外位移的方向和文档流的顺序没有任何关系，而且位移变换最不可替代的特性就是设定百分比偏移值。例如：

transform:translate(-50%,-50%);

表示往左偏移自身宽度的一半，往上偏移自身高度的一半；这个百分比值非常适合实现高度不固定元素的水平垂直居中效果，例如给弹窗元素居中定位：

.dialog{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}

注意，相对于绝对定位元素尽量还是使用margin属性进行偏移定位，把transform属性留出来实现animation动画效果。

• rotate()旋转 例如把图片旋转45度：

img{
    transform:rotate(45deg);
}

其中正数值代表顺时针旋转。这里面还有几个CSS的角度单位，下次继续。

综述

上述是前面提到的2D变换的前两种，其中还有一个小知识点是关于CSS角度单位的，下一篇继续~