2D位移变换-CFANZ编程社区

2D位移变化

transform：translate（px，像素、%，相对于自身的高度来计算（包括内容区，边框，内边距）

）

transform移动的位置，不会影响其他元素的位置，但是原位置会保留位置

transform作为子盒子，子绝父相，可以脱离文档流，不占位置

平移：

水平方向移动50px

transform: translateX(50px);

水平方向移动移动的是相对于自身的百分比，等于移动一个自己

transform: translateX(100%);

如果translate里面只有一个的值的时候那么代表的是水平方向，两个值代表X，Y，需要用逗号隔开

链式执行：transform: translateX(50px) translateX(50px) translateY(50px);

translate中的百分比单位是相对于自身元素的 translate:(50%,50%);
translate类似定位，不会影响到其他元素的位置
对行内标签没有效果

2D旋转：2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转

使用2D旋转的步骤：

给元素添加转换属性 transform
属性值为 rotate(角度) 如 transform:rotate(30deg) 顺时针方向旋转30度

rotate() 设置旋转的角度；角度的单位是 deg，值越大，顺时针旋转的就越多，正负值都可以设置。

2D缩放：2D缩放指的是让元素在2维平面内大小发生变化

使用2D缩放的步骤：

给元素添加转换属性 transform
转换的属性值为 scale(宽的倍数,高的倍数) 宽变为两倍，高变为3倍transform:scale(2,3)

scaleX()，scaleY()，scale(X,Y)，scale()内只写一个值时，XY都应用，以中心为原点，向四周缩放

倍数为0时，元素会消失不见

总结：

transform:scale(1,1) 放大一倍相对于没有放大
transform:scale(2,2) 宽和高都放大了2倍
transform:scale(2) 只写一个参数第二个参数则和第一个参数一样相当于 scale(2,2)
transform:scale(0.5,0.5) 缩小
transform:scale(-2,-2) 反向放大2倍很少用负数容易让人产生误解

2D扭曲

skewX()元素在水平方向扭曲。如果只为正数，元素的左上角和右下角将会被拉扯。如果值为负数，元素的右上角和左下角会被拉扯.（角度为正值时，左上尖角往左边走）

skewY()元素在垂直方向扭曲变形。如果只为正数，元素的左上、右下将会被拉扯。如果只为负数，元素的右上、左下将会被拉扯。（角度为正值时，左上尖角往右边走）

skew（）

x 表示在x轴上的倾斜角度，单位为 deg。
y 表示在y轴上的倾斜角度，单位为 deg。

设置X轴扭曲时，Y轴的在盒子的高度范围内变化

设置Y轴扭曲时，X轴的在盒子的高度范围内变化

XY轴都扭曲时，根据XY的扭曲程度改变范围

多重变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

        .box {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            font-family: "楷体";
            font-size: 120px;
            background-color: red;

            transform: translate(-50%, -50%) rotate(45deg);
        }

        .box span {
            display: inline-block;
            transform: rotate(135deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <span>福</span>
    </div>
</body>
</html>