2020/5/27

2D转换（transform）

转换可以实现元素的位移、旋转、缩放等效果。可以理解为变形。
结合过渡和hover一起用。

（1）移动translate/translateX/translateY

语法：

transform： translate(x,y);
transform： translateX(x);
transform： translateY(y);

重点

  1. 沿着X和Y轴移动元素，(x,y)括号内的是终点坐标
  2. 不会影响其它元素位置
  3. 百分比单位是相对与自身元素的大小
  4. 对行内标签没有效果

常用——盒子居中

    
.box {
            position: relative;
            width: 500px;
            height: 300px;
            margin: 100px auto;
            background-color: pink;
        }

        .slate {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100px;
            height: 100px;
            background-color: red;
            transform: translate(-50%, -50%);
        }

（2）旋转

语法：

transform：rotate(45deg);

重点

  1. rotate里面跟度数，单位deg
  2. 角度为正，顺时针；负时，逆时针
  3. 默认旋转中心点是元素中心点

可以用来做小三角

    
div {
    position: relative;
    width: 200px;
    height: 40px;
    margin: 100px auto;
    background-color: pink;
}

div::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 15px;
    width: 10px;
    height: 10px;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    transform: rotate(45deg);
}

（3）2D转换中心点

语法：

transform-origin: x y;

注意点

  1. x和y可以跟方位名词或者像素值
  2. 默认为50% 50%，
  3. x和y用空格隔开

常用案例

    
div {
    overflow: hidden;
    width: 200px;
    height: 200px;
    border: 1px solid pink;
    margin: 100px auto;
}

div::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: pink;
    transform: rotate(180deg);
    transform-origin: left bottom;
    transition: all .4s;
}

div:hover::before {
    transform: rotate(0deg);
}

（4）缩放（scale）

语法：

transform：scale(x,y);

注意点

  1. x与y用逗号分开，不跟单位，倍数（比例）缩放
  2. transform：scale(1,1); 即：放大一倍，无变化
  3. transform：scale(2,2); 即：宽高都放大了2倍
  4. transform：scale(2);相当于transform：scale(2,2);
  5. transform：scale(0.5,0.5); 即：缩小
  6. 可以设置缩放中心点，默认中心点，且不影响其他元素

案例

    
div {
    overflow: hidden;
    float: left;
    width: 400px;
    height: 240px;
    margin: 10px;
}

div img {
    width: 100%;
    height: 100%;
    transition: all .4s;
}

div img:hover {
    transform: scale(1.1);
}

(4)2D转换综合写法

语法：

transform: translate() rotate() scale()...

注意点

  1. 同时使用多个转换，其顺序会影响转换的效果（先旋转会改变坐标轴方向）
  2. 当我们同时有位移和其他属性的时候，记得要将位移放到最前（看情况而定）
  3. 转换是相对与盒子正面而定的，当盒子旋转时，其坐标轴也跟着变化

案例

    
div {
    width: 200px;
    height: 200px;
    margin: 10px 0;
    background-color: pink;
    transition: all 4s;
}

div:first-child:hover {
    transform: translate(1000px) rotate(30deg);
}

div:last-child:hover {
    transform: rotate(30deg) translate(1000px);
}