浏览器私有前缀、CSS3：2D转换、动画、3D转换

原创已于 2025-09-20 15:25:04 修改 · 958 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #3d #前端 #动画 #2d #浏览器私有前缀

于 2025-09-20 15:24:02 首次发布

前端html+css 专栏收录该内容

9 篇文章

订阅专栏

1.2D转换

transform：实现元素的位移、旋转、缩放等效果。

移动：translate

旋转：rotate

缩放：scale

1）移动translate

语法：

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

重点：

        定义2D转换中的移动，沿着X和Y轴移动元素

        translate最大的优点：不会影响其他元素的位置

        translate中的百分比单位是相对于自身元素的translate:(50%,50%);

        对行内标签没有效果

让盒子实现水平垂直居中，之前我们用的是margin-top、margin-left做的，如果盒子大小变化，那么这两个数值也要改，而transform很好的解决了这个问题。

    <style>
        .box1 {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: skyblue;
            transform: translateX(50%);
        }

        .box {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            background-color: pink;
            transform: translate(-50%, -50%);
        }
    </style>

<doby>
    <div class="box1">
        <div class="box"></div>
    </div>

</doby>

2）旋转rotate

语法：

transform:rotate(度数)

重点：

rotate里面跟度数，单位是deg，比如rotate(45deg)

角度为正时，顺时针，负时，为逆时针

默认旋转的中心点是元素的中心点

让图片旋转：

    <style>
        img {
            width: 200px;
            transform: rotate(45deg);
        }
    </style>

同时，我们可以做出，当鼠标放在图片上时，图片可以旋转360°，我们会发现当设置transform: rotate(360deg);后，鼠标放上去，图片没有动，这是因为图片旋转360°后，还是这个样子，此时加个过渡即可，eg：

    <style>
        img {
            width: 200px;
            /* transform: rotate(45deg); */
            /* 过渡写到本身上，谁做过渡给谁加 */
            transition: all 1s;
        }

        img:hover {
            transform: rotate(360deg);
        }
    </style>

<doby>
    <img src="images/1.jpg" alt="">
</doby>

三角形案例，只需要一个正方形的盒子，然后只要盒子的右边框和下边框即可，eg：

    <style>
        div {
            position: relative;
            width: 250px;
            height: 40px;
            border: 1px solid gray;
        }

        div::after {
            content: '';
            position: absolute;
            top: 15px;
            right: 10px;
            width: 10px;
            height: 10px;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            transform: rotate(-45deg);
        }
    </style>

<doby>
    <div></div>
</doby>

让三角旋转：

    <style>
        div {
            position: relative;
            width: 250px;
            height: 40px;
            border: 1px solid gray;
        }

        div::after {
            content: '';
            position: absolute;
            top: 15px;
            right: 10px;
            width: 10px;
            height: 10px;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            transform: rotate(-45deg);
            transition: all 0.5s;
        }

        div:hover::after {
            transform: rotate(45deg);
        }
    </style>

3）2D转换中心点transform-origin

语法：

transform-origin:x y;

重点：

注意后面的参数x和y用空格隔开

x y默认转换的中心点是元素的中心点(50%,50%)

还可以给x y设置像素或者方位名词(top bottom left right center)

    <style>
        div {
            position: relative;
            width: 250px;
            height: 200px;
            background-color: skyblue;
            margin: 100px auto;
            transition: all 1s;
            /* transform-origin: 0 100%; */
            transform-origin: 50px 50px;
        }

        div:hover {
            transform: rotate(360deg);
        }
    </style>

案例：

    <style>
        div {
            overflow: hidden;
            position: relative;
            width: 200px;
            height: 200px;
            border: 1px solid skyblue;
            margin: 100px auto;
        }

        div::before {
            content: "优快云";
            display: block;
            width: 100%;
            height: 100%;
            background-color: pink;
            transform: rotate(180deg);
            transform-origin: left bottom;
            transition: all 1s;
        }

        div:hover::before {
            transform: rotate(0deg);
        }
    </style>

4）缩放scale

语法：

transform:scale(x,y);

注意：

x，y用逗号分隔

transform:scale(1,1)：宽和高都放大一倍，相当于没用放大

        transform:scale(2,2)：宽和高都放大2倍

        transform:scale(2)：只写一个参数，第二个参数则和第一个参数一样，相当于scale(2,2)

        transform:scale(0.5,0.5)：缩小

sacle缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            margin: 100px auto;
            transition: all 1s;
        }

        div:hover {
            /* 缩小 */
            /* transform: scale(0.5, 0.5); */
            /* 放大 */
            transform: scale(2);
        }
    </style>

图片放大案例：

    <style>
        div {
            overflow: hidden;
            width: 500px;
            height: 200px;
            background-color: skyblue;
            margin: 100px auto;

        }

        img {
            height: 100%;
            width: 100%;
            transition: all 1s;
        }

        div img:hover {
            /* 缩小 */
            /* transform: scale(0.5, 0.5); */
            /* 放大 */
            transform: scale(2);
        }
    </style>

<doby>
    <div><a href="#"><img src="images/1.jpg" alt=""></a></div>
    <div><a href="#"><img src="images/1.jpg" alt=""></a></div>
    <div><a href="#"><img src="images/1.jpg" alt=""></a></div>
</doby>

案例：分页按钮

    <style>
        li {
            float: left;
            width: 30px;
            height: 30px;
            border: 1px solid skyblue;
            margin: 10px;
            text-align: center;
            line-height: 30px;
            list-style: none;
            border-radius: 50%;
            /* 鼠标变成小手 */
            cursor: pointer;
            transition: all 0.5s;
        }

        li:hover {
            transform: scale(1.2);
        }
    </style>

<doby>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
</doby>

5）复合写法

注意：

同时使用多个转换，其格式为：transform:translate() rotate() scale() ...等

其顺序会影响转换的效果（先旋转会改变坐标轴方向）

当我们同时有位移和其他属性的时候，记得要将位移放到最前

6）总结

注：倒数第三行是scale

2、动画

---通过设置多个节点来精确控制一个或一组动画

相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

1）基本使用

制作动画：先定义动画、再使用（调用）动画

用keyframes定义动画（类似定义类选择器）

@keyframes 动画名称 {
    0%{
        width:100px;
    }
    100%{
        width:200px;
    }
}

使用动画

            animation-name: 动画名称;
            /* 持续时间 */
            animation-duration: 持续时间;

2）动画序列

案例：

    <style>
        /* 可以做多个状态的变化 keyframe 关键帧  里面的百分比要是整数 里面的百分比就是总的时间的划分
        */
        @keyframes move {
            0% {
                transform: translate(0);
            }

            25% {
                transform: translate(1000px, 0);
            }

            50% {
                transform: translate(1000px, 500px);
            }

            75% {
                transform: translate(0, 500px);
            }

            100% {
                transform: translate(0);
            }
        }

        div {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            transition: all .5s;
            /* 调用动画 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 10s;
        }
    </style>

3）动画常用属性

注：倒数第二行pause改为paused

简写属性：animation：动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态。

4）热点图案例

    <style>
        body {
            background-color: #333;
        }

        .map {
            position: relative;
            width: 747px;
            height: 617px;
            background: url(images/map.png) no-repeat;
            margin: 0 auto;
        }

        .city {
            position: absolute;
            top: 227px;
            right: 193px;
            color: #fff;
        }

        .tb {
            top: 500px;
            right: 80px;
        }

        .gz {
            top: 544px;
            right: 191px;
        }

        .dotted {
            width: 8px;
            height: 8px;
            background-color: #09f;
            border-radius: 50%;
        }

        .city div[class^="pulze"] {
            /* 保证小波纹在父盒子里面水平垂直居中 放大之后中心向四周发散*/
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 8px;
            height: 8px;
            box-shadow: 0 0 12px #009dfd;
            border-radius: 50%;
            animation: pulse 1.2s linear infinite;
        }

        .map .city .pulze2 {
            animation-delay: 0.4s;
        }

        .map .city .pulze3 {
            animation-delay: 0.8s;
        }

        @keyframes pulse {
            0% {}

            70% {
                width: 40px;
                height: 40px;
                /* 透明度 */
                opacity: 1;
            }

            100% {
                width: 70px;
                height: 70px;
                opacity: 0;
            }
        }
    </style>

<doby>
    <div class="map">
        <div class="city">
            <div class="dotted"></div>
            <div class="pulze1"></div>
            <div class="pulze2"></div>
            <div class="pulze3"></div>
        </div>
        <div class="city tb">
            <div class="dotted"></div>
            <div class="pulze1"></div>
            <div class="pulze2"></div>
            <div class="pulze3"></div>
        </div>
        <div class="city gz">
            <div class="dotted"></div>
            <div class="pulze1"></div>
            <div class="pulze2"></div>
            <div class="pulze3"></div>
        </div>
    </div>
</doby>

5）速度曲线细节

6）案例：奔跑的熊大

小熊奔跑：只需要一个盒子，盒子只能装一个画面，第一次装第一个，依次类推即可（关键帧动画）。

    <style>
        .bgcr {
            position: absolute;
            width: 3840px;
            height: 336px;
            background: url(images/bg1.png);
            animation: bgcr 20s infinite;
        }

        @keyframes bgcr {
            0% {
                background-position: 0 0;
            }

            100% {
                background-position: -3840px 0;
            }
        }

        .bear {
            position: absolute;
            top: 202px;
            width: 200px;
            height: 100px;
            background: url(images/bear.png) no-repeat;
            /* 元素可以添加多个动画，用逗号分隔 */
            animation: bear 1s steps(8) infinite, run 8s forwards;
        }

        @keyframes bear {
            0% {
                background-position: 0 0;
            }

            100% {
                /* 熊忘左走  */
                background-position: -1600px 0;
            }
        }

        @keyframes run {
            0% {
                left: 0;
            }

            100% {
                left: 50%;
                /* 不要把代码写死 */
                transform: translateX(-50%);
                /* margin-left: -100px; */
            }
        }
    </style>

<doby>
    <div class="bgcr">
        <div class="bear"></div>
    </div>

</doby>

3、3D转换

特点：近大远小、物体后面遮挡不可见

1）三维坐标轴

2）3D转换

主要知识点：

3D位移：translate(x,y,z)

3D旋转：rotate(x,y,z)

透视：perspective

3D呈现transform-style

（1）3D位移translate3d

注意：是transform；x,y,z不可省略

（2）透视perspective

（3）3D旋转rotate3d

（4） 3D呈现transform-style

（5）案例：两面翻转的盒子

两个盒子叠在一起，有颜色的一面朝向相同，将其中一个盒子翻转，让他们背对背

    <style>
        body {
            perspective: 500px;
        }

        .box {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            transition: all 1s;
            /* 让背面的粉色盒子保留立体空间 */
            transform-style: preserve-3d;

        }

        .box:hover {
            transform: rotateY(60deg);
        }

        .front,
        .back {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            font-size: 30px;
            color: #fff;
            /* 水平居中 */
            text-align: center;
            /* 垂直居中 */
            line-height: 300px;
            /* 由于front盒子加了z-index，所以当盒子旋转时，front盒子还会在上面我需要把底部的 div的 z-index 给调上来, 这样当顶部 div 的翻转的时候, 底部的 div 才能显示出来
            backface-visibility:当旋转的角度 >= 90deg ,如果 value 是 hidden的话, 该 div 会自动隐藏
            */
            backface-visibility: hidden;
        }

        .front {
            background-color: skyblue;
            z-index: 1;
        }

        .back {
            background-color: pink;
            transform: rotateY(180deg);
        }
    </style>

<doby>
    <div class="box">
        <div class="front">风里雨里</div>
        <div class="back">我在优快云等你</div>
    </div>

</doby>

（6）案例：3D导航栏

根据左手准则，从第二张图翻转到第三张图，是顺时针的，但是我们需要做的是从第三张图翻转到第二张图，让第二个盒子可以正着显示，因此应该逆时针旋转。

由此可以看出，粉盒子应该沿y轴正方向移动，如下图：

如果将下面的盒子移成如下图情况，当盒子旋转时，是绕着上面盒子的中心点旋转的，此时，下面的盒子会跑偏。

因此，我们可以将上面的盒子沿z轴移动，如图所示：

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        ul {
            margin: 100px;
        }

        ul li {
            float: left;
            margin: 0 5px;
            width: 120px;
            height: 35px;
            /* 由于我们想要3D效果，可以给box盒子加透视，同时，box需要实现翻转效果，也需要透视，因此写在li中 */
            perspective: 500px;
        }

        .box {
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: all .4s;
        }

        .box:hover {
            transform: rotateX(90deg);
        }

        .front,
        .back {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
        }

        .front {
            background-color: skyblue;
            z-index: 1;
            transform: translateZ(17.5px);
        }

        .back {
            background-color: pink;
            /* 如果有移动或者其他样式，必须先写移动 */
            transform: translateY(17.5px) rotateX(-90deg);
        }
    </style>

<doby>
    <ul>
        <li>
            <div class="box">
                <div class="front">风里雨里</div>
                <div class="back">我在优快云等你</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front">风里雨里</div>
                <div class="back">我在优快云等你</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front">风里雨里</div>
                <div class="back">我在优快云等你</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front">风里雨里</div>
                <div class="back">我在优快云等你</div>
            </div>
        </li>
    </ul>

</doby>

（7）综合案例：旋转木马

只需要将盒子摆放好，让盒子绕主轴旋转，再加上透视，即可实现近大远小的效果

  <style>
    body {
      perspective: 1000px;
    }

    section {
      /* position: inherit; */
      width: 400px;
      height: 250px;
      margin: 300px auto;
      transform-style: preserve-3d;
      animation: rotate 10s linear infinite;
      background: url(images/8.jpg) no-repeat;
    }

    @keyframes rotate {
      0% {
        transform: rotateY(0);
      }

      100% {
        transform: rotateY(360deg);
      }
    }

    section:hover {
      /* 鼠标放入section 停止动画 */
      animation-play-state: paused;
    }

    section div {
      position: absolute;
      top: 0;
      left: 0;

    }

    section div:nth-child(1) {
      transform: translateZ(400px);
    }

    section div:nth-child(2) {
      /* 先旋转好了，在移动 */
      transform: rotateY(60deg) translateZ(400px);

    }

    section div:nth-child(3) {
      /* 先旋转好了，在移动 */
      transform: rotateY(120deg) translateZ(400px);

    }

    section div:nth-child(4) {
      /* 先旋转好了，在移动 */
      transform: rotateY(180deg) translateZ(400px);

    }

    section div:nth-child(5) {
      /* 先旋转好了，在移动 */
      transform: rotateY(240deg) translateZ(400px);

    }

    section div:nth-child(6) {
      /* 先旋转好了，在移动 */
      transform: rotateY(300deg) translateZ(400px);

    }

    img {
      width: 400px;
      height: 250px;
    }
  </style>

<body>
  <section>
    <div><img src="images/2.jpg" alt=""></div>
    <div><img src="images/3.jpg" alt=""></div>
    <div><img src="images/4.jpg" alt=""></div>
    <div><img src="images/5.jpg" alt=""></div>
    <div><img src="images/6.jpg" alt=""></div>
    <div><img src="images/7.jpg" alt=""></div>
  </section>
</body>