CSS3新特性----2D转换

最新推荐文章于 2025-08-21 13:31:26 发布

原创最新推荐文章于 2025-08-21 13:31:26 发布 · 534 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

笔记

本文介绍了CSS3中的2D转换特性，包括移动(translate)、旋转(rotate)和缩放(scale)。移动允许元素在水平和垂直方向上平移，而不影响其他元素的位置；旋转则让元素在二维平面上按照指定角度顺时针或逆时针转动；缩放用于放大或缩小元素，同时可以设定缩放中心点。所有这些变换都能结合使用，提供丰富的视觉效果。

CSS3新增特性:

2D转换(transform)是改变标签在二维平面上的位置和形状的一种技术,是CSS3中具有颠覆性的特征之一,可以实现:缩放(scale),移动(translate),旋转(rotate),倾斜(skew)

2D转换–移动translate:

2D的移动主要指的是水平垂直方向上的移动

transform语法:

transform: translate(x, y)
transform: translateX(n)
transfrom: translateY(n)
transfrom: translateX(n) translateY(n)

x就是 x 轴上水平移动 y就是 y 轴上水平移动

注意:

translate 最大的优点就是不影响其他元素的位置
translate 中的100%单位，是相对于本身的宽度和高度来进行计算的
行内标签没有效果

2D 转换–旋转rotate:

2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转

2D旋转的语法:

transform: rotate(0deg);

给元素添加转换属性 transform
属性值为 rotate(角度) 如 transform:rotate(30deg) 顺时针方向旋转30度(deg是旋转角度的单位)

设置元素的旋转中心点:

语法:

transform-origin: x y;

注意后面的参数 x 和 y 用空格隔开
x y 默认旋转的中心点是元素的中心 (50% 50%)，等价于 center center
还可以给 x y 设置像素或者方位名词(top、bottom、left、right、center)

案例:

实现效果:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fuy6679E-1609902843303)(C:\Users\x1309\Desktop\闪电GIF制作软件\旋转动画.gif)]

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旋转动画</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            overflow: hidden;
            transition: all .3s;
        }

        .bigdiv {
            margin: 200px auto;
        }

        .div1 {
            width: 100px;
            height: 100px;
            background-color: pink;
            transform-origin: 0 100%;
            transform: rotate(90deg);
            text-align: center;
        }

        .div1::before {
            content: "旋转动画";
            font-size: 20px;
            line-height: 100px;
        }

        div:hover .div1 {
            transform: rotate(0deg)
        }
    </style>
</head>

<body>
    <div class="bigdiv">
        <div class="div1"></div>
    </div>

</body>

</html>

2D转换–缩放scale:

缩放scale用来控制元素的放大与缩小

语法:

transform: scale(x, y)

注意:

x 与 y 之间使用逗号进行分隔
transform: scale(1, 1): 宽高都放大一倍，相当于没有放大
transform: scale(2, 2): 宽和高都放大了二倍
transform: scale(2): 如果只写了一个参数，第二个参数就和第一个参数一致
transform:scale(0.5, 0.5): 缩小
scale 最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子

案例:

实现:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tEtLCIS2-1609902843314)(C:\Users\x1309\Desktop\闪电GIF制作软件\放大动画.gif)]

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片放大</title>
    <style>
        div {
            width: 275px;
            height: 400px;
            margin: 150px auto;
            border: 1px solid black;
            overflow: hidden;
        }

        div img {
            height: 400px;
            transition: all .3s;
        }

        div img:hover {
            transform: scale(1.1);
        }
    </style>
</head>

<body>
    <div>
        <img src="./images/姜子牙.jpg">
    </div>
</body>

</html>