CSS平面转换

桐叶~

已于 2023-11-28 13:34:45 修改

阅读量47

点赞数

分类专栏： # CSS3 文章标签： css 平面前端 html css3

于 2023-11-25 22:21:53 首次发布

本文链接：https://blog.csdn.net/m0_57851747/article/details/134621085

版权

CSS3 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

css平面转换

一.位移
二.缩放
三.旋转
四.多重转换
四.转换原点

一.位移

语法：
transform:translate(水平移动距离，垂直移动距离)
取值(正负均可)：像素单位数值或者百分比 (参照物为盒子自身尺寸)
注意: X轴正向为右，Y轴正向为下，如图所示：
在这里插入图片描述

技巧:

translate()如果只给出一个值,表示x轴方向移动距离
单独设置某个方向的移动距离: translateX() 与 translateY() 注意XY要大写

注意点：如果同时设置 translateX() 和 translateY()，那么只生效最下面的一个，也就是说只会在单方向上移动，不会出现两个方向同时移动的情况，要同时移动需要translate()写法。

示例（盒子居中）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            position: relative;
            width: 311px;
            height: 311px;
            background-color: pink;
        }
        .son {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            width: 111px;
            height: 111px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

二.缩放

目的：使用scale改变元素尺寸，基于中心缩放，不同于直接再设宽高(类似基于左上角缩放)
场景：一般会使用绝对定位居中覆盖在盒子上面，根据具体需求放大缩小绝对定位的盒子，将其隐藏，再使用鼠标悬停显示绝对定位的盒子的内容再根据需求放大缩小，增加用户体验感。
语法：transform:scale(x轴缩放倍数,y轴缩放倍数);
技巧：

一般情况下，只为scale设置一个值,表示x轴和y轴等比例缩放，transform: scale(缩放倍数);
scale值大于1表示放大,scale值小于1表示缩小

三.旋转

目标: 使用rotate实现元素旋转效果
语法：transform:rotate(角度)
注意:角度单位是deg
技巧:
取值为正,则顺时针旋转；取值为负,则逆时针旋转

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 1111px;
            height: 311px;
            background-color: pink;
            overflow: hidden;
        }
        .son {
            
            width: 111px;
            height: 111px;
            background-color: skyblue;
            transition: all 2s;
        }
        .father:hover .son {
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

四.多重转换

多重转换指的是多种转换配合使用，这里给出位移配合旋转做出的效果，但有要注意的是：transform复合属性连写带旋转的放在最后，因为旋转会改变坐标轴向；同时也不能单独写这样会因为层叠性只生效最下面的transform
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 1111px;
            height: 311px;
            background-color: pink;
            overflow: hidden;
        }
        .son {
            width: 111px;
            height: 111px;
            background-color: skyblue;
            transition: all 2s;
        }
        .father:hover .son {
            transform: rotate(360deg);
            /* 多重转换：transform复合属性连写带旋转的放在最后，因为旋转会改变坐标轴向；同时也不能单独写这样会因为层叠性只生效最下面的transform */
            transform: translate(500px) rotate(720deg);
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

四.转换原点

目标: 使用transform-origin属性改变转换原点，默认原点是盒子中心点
场景：比如风车是绕着中心点转动，而时钟的秒针是绕着底部进行旋转
在这里插入图片描述
语法：

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

取值（方位名词比较常用）：

方位名词 (left、top、right、bottom、center)
像素单位数值
百分比(参照盒子自身尺寸计算)

注意点：添加给元素本身，不要添加到hover

示例：
在这里插入图片描述

桐叶~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS平面转换

css平面转换：位移，缩放，旋转。多重转换指的是多种转换配合使用，这里给出位移配合旋转做出的效果，但有要注意的是：transform复合属性连写带旋转的放在最后，因为旋转会改变坐标轴向；注意点：如果同时设置 translateX() 和 translateY()，那么只生效最下面的一个，也就是说只会在单方向上移动，不会出现两个方向同时移动的情况，要同时移动需要translate()写法。/* 多重转换：transform复合属性连写带旋转的放在最后，因为旋转会改变坐标轴向；
复制链接

扫一扫