平面转换（平移，旋转，缩放，倾斜）

不会前端的小李

已于 2023-10-11 19:59:11 修改

阅读量182

点赞数

文章标签： web 前端 vscode css

于 2023-10-11 19:58:22 首次发布

本文链接：https://blog.csdn.net/qq_61453210/article/details/133776696

版权

前言

平面转换transform：为元素添加动态效果，一般配合过渡使用。

一、平面转换—平移

平移属性：transform: translate(X轴移动距离，Y轴移动距离);

取值：像素单位数值或者百分比（参照盒子自身尺寸计算结果），正负均可。

实例：鼠标移到父盒子，子盒子改变位置。将子盒子向左边移动自身的50%(100px)，向下移动100px

        .father {
            width: 400px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid #000;
        }
        
        .son {
            width: 200px;
            height: 100px;
            background-color: pink;
            transition: all 1s;
        }
        
        .father:hover .son {
            /* transform: translate(200px, 100px); */
            /* 百分比： 参照盒子自身尺寸计算 */
            transform: translate(50%, 100%);
        }

二、平面转换—旋转

旋转属性：transform: rotate（旋转角度）；角度单位为：deg

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

实例：将图片顺时针旋转30°

img {
            width: 200px;
            transition: all 1s;
        }
img:hover {
            transform: rotate(30deg);
        }

三、平面转换—改变转换原点

默认的情况下，转换原点是盒子中心点

属性：transform-origin: 水平原点位置垂直原点位置;

取值：方位名词，像素单位数值，百分比

实例：将图片以左上角为转换原点进行旋转

img {
            width: 200px;
            transition: all 1s;
            transform-origin: left top;
        }
        
        img:hover {
            transform: rotate(60deg);
        }

四、平面转换—缩放

属性：transform: scale(缩放倍数)；transform: scale(X轴缩放倍数，Y轴缩放倍数)；

取值：大于1表示放大，小于1表示缩小

通常只设置一个值，表示X轴和Y轴等比例缩放

实例：将图片放大2倍

 .box {
            width: 300px;
            height: 200px;
            margin: 100px auto;
            background-color: pink;
        }
        
        .box img {
            width: 100%;
            transition: all 0.5s;
        }
        
        .box:hover img {
            transform: scale(2);
        }

五、平面转换—倾斜

属性：transform: skew();

取值：角度度数deg，取正值表示向左倾斜，取负值表示向右倾斜

实例：将盒子向左倾斜30°

div {
            margin: 100px auto;
            width: 100px;
            height: 200px;
            background-color: pink;
            transition: all .5s;
        }
        
div:hover {
            transform: skew(30deg);
        }