css2D转换(transform)

Posted 冰凉小手

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css2D转换(transform)相关的知识,希望对你有一定的参考价值。

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. 对行内标签没有效果

常用——盒子居中

    <div class="box">
        <div class="slate"></div>
    </div>
.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></div>
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></div>
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><a href=""><img src="../素材/11-风景1.jpeg" alt=""></a></div>
    <div><a href=""><img src="../素材/11-风景2.jpeg" alt=""></a></div>
    <div><a href=""><img src="../素材/11-风景3.jpeg" alt=""></a></div>
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></div>
    <div></div>
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);
}

以上是关于css2D转换(transform)的主要内容,如果未能解决你的问题,请参考以下文章

CSS2D变换

保姆级解读!CSS属性transform变形+2D转换+3D转换实例+代码+解析——Web前端系列学习笔记

保姆级解读!CSS属性transform变形+2D转换+3D转换实例+代码+解析——Web前端系列学习笔记

优维低代码:Transform 数据转换

css常用代码片段 (更新中)

##CSS 2D 转换##