transform复合属性的各种平面转换

岳泽以

发布于 2022-10-26 16:32:09

6800

发布于 2022-10-26 16:32:09

文章被收录于专栏：岳泽以博客岳泽以博客

使用transform属性可以实现元素的位移、旋转、缩放等效果

改变盒子在平面内的形态
2D转换

注意：在使用转换前，都需要给元素添加一个过渡效果：transition: all 0.5s;

位移

使用 translate实现元素的位移。

语法：

transform: translate(100px, 50px);

或：

transform: translate(100%, 50%);

利用百分比来写的话，取的是移动元素本身的百分比。

取值：

水平方向正值指向右，负值指向左。

垂直方向正值指向下，负值指向上。

即上左下右原则。

双开门

双开门效果便是，鼠标移入之后，会有一个向两边打开门的效果。

<style>
        * {
            margin: 0;
            padding: 0;
        }
  
        .box {
            width: 1366px;
            height: 600px;
            margin: 0 auto;
            background: url('https://pic.zeyiwl.cn/yunimg/20220116091748.jpg');
            overflow: hidden;
        }
  
        .box::before,
        .box::after {
            float: left;
            content: '';
            width: 50%;
            height: 600px;
            background-image: url('https://pic.zeyiwl.cn/yunimg/20220116091739.jpg');
            transition: all .5s;
        }
  
        .box::after {
        /* 右侧盒子的背景图 */
            background-position: right 0;
        }
        /* 鼠标移入的时候的位置改变的效果 */
  
        .box:hover::before {
            transform: translate(-100%);
        }
  
        .box:hover::after {
            transform: translateX(100%);
        }
    </style>
</head>

<body>
    <div class="box">

    </div>
</body>

右侧盒子的背景图使用 background-position: right 0;实现。

left和right分别代表向左右侧移动自身宽度。

旋转

使用 rotate属性实现元素的旋转效果。

语法：

transform:rotate(旋转角度)

注意：角度的单位是 deg

取值：正负度数取值，正为顺时针旋转，负为逆时针旋转。

    <style>
        img {
            width: 250px;
            transition: all 2s;
        }
  
        img:hover {
            /* 顺 */
            transform: rotate(360deg);
            /* 逆 */
            /* transform: rotate(-360deg); */
        }
    </style>
</head>

<body>
    <img src="https://pic.zeyiwl.cn/yunimg/20220116092741.png" alt="">
</body>

转换原点

默认原点是盒子中心点。

语法：transform-origin:原点水平位置原点垂直位置;

取值：方位名词、像素、百分比(参照盒子自身尺寸)

    <style>
        img {
            width: 250px;
            border: 1px solid #000;
            transition: all 2s;
            transform-origin: right bottom;
        }
  
        img:hover {
            transform: rotate(360deg);
        }
    </style>
</head>

<body>
    <img src="https://pic.zeyiwl.cn/yunimg/20220116092741.png" alt="">
</body>

多重转换

使用多重转换可以实现多种形态的转换，比如可以同时旋转+位移。

transform: translate() rotate();

多重转换中，一般先写位移再写旋转，因为旋转会改变网页元素的坐标轴向，如果先写旋转则后面的转换效果的轴向以旋转后的轴向为准，会影响到转换效果。

    <style>
        .box {
            width: 800px;
            height: 200px;
            border: 1px solid #000;
        }
  
        img {
            width: 200px;
            transition: all 8s;
        }
  
        .box:hover img {
            /* 边走边转 */
            transform: translate(600px) rotate(360deg);
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="https://pic.zeyiwl.cn/yunimg/20220116143048.png" alt="">
    </div>
</body>

缩放

在网页中，可以使用 scale改变元素的尺寸，即元素的宽度和高度。

语法：

transform: scale(x轴缩放倍数, y轴缩放倍数);

一般情况下，只为 scale设置一个值，表示x轴和y轴等比例缩放。

transform:scale(缩放倍数);

scale的取值大于1表示放大，小于1表示缩小。

注意：在操作缩放属性时需要注意层叠性。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2022 年 01 月，如有侵权请联系 cloudcommunity@tencent.com 删除

background

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度