No tag
Publish Date:   2024-07-21

前言

在网页制作课程大作业时，在网上抄了一个看起来很帅的3D轮播图，不过并不了解怎么实现，非常好奇，于是又重新查资料，整理了一下关于CSS实现动画的一些基本语法，希望大家也能通过自己的好奇心，自主的学习更多知识。

大纲预览

首先介绍3D变换的平移，选择，缩放，原点与过度

接着了解动画的实现

最后扩展分享一个3D轮播图的案例

3D变换

注：transform不会改变元素在文档流中的位置（即它不会改变元素的 top、right、bottom、left 或 z-index 属性），但它会改变元素在页面上的视觉呈现。

基本语法

1.位移：translate3d translateX translateY translateZ

格式：transform:translate3d(x,y,z)/translateX(x)……

参数单位：px

x,y,z：为移动量，正方向为：右，上，前（沿Z轴向屏幕外移动）

2.旋转：rotate3d rotateX rotateY rotateZ

格式：transform:rotate(a,b,c,angle)/rotateX(n)……

单位：deg

rotate3d中：a,b,c确定旋转点，angle为旋转度数；

rotateX(n)为绕x轴旋转n度，同理rotatY(n)为绕y轴旋转n度；正数为顺时针

3.缩放：scale3d scaleX scaleY scaleZ

格式：transform:scale3d(x,y,z)/scaleX(x)

单位：数字（缩放倍数：大于1放大，小于1缩小）

4.变换原点

原点就是发生变换的轴点，可以通过transform-origin属性改变原点的位置；

设置偏移值都是重左上角开始的；默认为：transform-origin:center center；

原点设置关键字：top，bottom，center，left。right；也可以使用px，em，百分比等设置（不常用）

5.父元素样式

3D变换效果需要通过设置父元素样式才能保留3d的变化效果

保留3d变换：transform-style:preserve-3d（此属性指定了嵌套元素在3D空间中的呈现方式。）

设置视角深度：perspective:1000px(此属性定义了观察者与z=0平面的距离，即透视距离。)

6.过度

概念：元素从一种属性的取值逐渐变化为另一种同样属性的取transition：值（由于是慢慢改变，所以会有过渡的效果）

最简单的设置：transition:1s(过度花费1s)

过度的属性名称transition-property:属性名（none：补变换）

过度演示执行时间transition-delay:ns(n秒后发生过度）

案例解析

可以通过案例来观察变换的情况

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例解析</title>

    <style>
    body{
        transform-style:preserve-3d ;
        perspective: 1000px;
    }
        
    .box{
        width: 350px;
        background-color: rgb(0, 242, 255);
        padding: 50px 10px 50px 10px;
        /*下面为创建3d效果*/
        transform-style:preserve-3d ;
        perspective: 1000px;

       
        /*transform: rotateX(40deg)  沿X轴旋转40°*/;
        /*opacity: 0.5;    透明度0.5*/

    }
    .a{
        width: 50px;
        height: 50px;
        background-color: red;
        margin-bottom: 10px;
        font-size: 16px;
        color: black;
        text-align: center;
        line-height: 50px;
        /*此处设置显示延迟为1s*/
        transition: 1s;
    }

    /*使用:active 伪类的行为
    可以元素被鼠标点击并按下时激活*/

    /*实现左右平移*/
    .a1:active{
        transform: translate(100px);
        /*transform:translateX(100px);   效果一样*/
    }
    /*实现向前平移
    如果下后平移，可能会被遮住，可以设置透明度opacity,将透明度的注释打开
    */
    .a2:active{
        /*transform: translate(0,0,100px);*/
        transform: translateZ(100px);
    }
    /*顺时针旋转60°
    将box属性中的沿x轴旋转40°的属性注释打开，可以更明显的看出
    同理可以修改度数或者变化的轴
    */
    .a3:active{
        transform: rotateX(60deg);
    }

    /*缩放*/
    .a4:active{
        transform: scale3d(4,2,0);
        /*transform:scaleX(3); 长放大3倍*/
    }
    /*更换旋转点*/
    .a5:active{
        transform: rotate(30deg);
        /*绕左下方旋转*/
        transform-origin:left bottom;
    }

    </style>


</head>
<body>
    <div class="box">
        <div class="a a1">位移</div>
        <div class="a a2">位移</div>
        <div class="a a3">旋转</div>
        <div class="a a4">缩放</div>
        <div class="a a5">旋转</div>
    </div>


    
</body>
</html>

动画的实现

定义：通过@keyframes规则定义一系列的关键帧，每个关键帧描述了动画过程中的一个特定点（如0%、50%、100%等）的样式。然后，通过animation属性将这些关键帧应用到元素上，并控制动画的播放方式。

规则：先创建再使用

创建动画 @keyframes规则

  1. 定义动画名字：@keyframes 动画名字

  2. 动画持续时间的百分比（不同百分比执行不同的事件）：keyframes-scelector

    1. 0%~100%
    2. from(和0%一样）
    3. to（和100%一样)

  3. 使用动画名称 animation-name:名字

  4. 设置动画完成一个周期所有的时间：animation-duration:ns(默认为0秒）

  5. 设置动画执行次数animation-iteration-count:n(默认为0次，infinite为一直执行）

  6. 设置动画开始播放前的延时时间animation-delay:ns（默认为1秒）

实例解析

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例解析</title>

    <style>      
    .box{
        width: 350px;
        background-color: rgb(0, 242, 255);
        padding: 50px 10px 50px 10px;
    }
    .a{
        width: 50px;
        height: 50px;
        background-color: red;
        margin-bottom: 10px;
        font-size: 16px;
        color: black;
        text-align: center;
        line-height: 50px;
    }
    /*创建动画  我此处用动画画了个6*/
    @keyframes identifier1 {
        0%{
            transform: translate(0px);
        }
        20%{
            transform: translate(0px,200px);
        }
        40%{
            transform: translate(200px,200px);
        }
        60%{
            transform: translate(200px,100px);
        }
        80%{
            transform: translate(0,100px);
        }
        100%{
            transform: translate(0px);
        }
        
    }
    .a1{
        /*使用动画的名字*/
        animation-name: identifier1;
         /*动画完成一个周期的时间*/
        animation-duration: 3.5s;
         /*动画执行的次数*/
         animation-iteration-count:5;
         /*动画*/
         animation-delay: 2s;
    }
    </style>

</head>
<body>
    <div class="box">
        <div class="a a1">位移</div>
        
    </div>
</body>
</html>

扩展3D轮播图案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!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>
        /* 设置整个页面的背景颜色为蓝色 */  
body{  
    background-color: blue;  
}  
  
/* 设置旋转盒子的样式 */  
.旋转盒子{  
    display: flex;  /* 使用Flex布局 */    
    justify-content: center; /* 使得子元素在主轴（默认水平）上居中 */    
    align-items: center; /* 使得子元素在交叉轴（默认垂直）上居中 */    
    margin: 0;  /* 移除默认的外边距 */    
    padding: 0;  /* 移除默认的内边距 */    
    border: 1px solid black; /* 设置边框为1px的黑色实线，以便可视化边界 */    
    width: 1536px;  /* 设置宽度为1536px */    
    height: 800px;  /* 设置高度为800px */    
      
    /* 如果需要背景色或其他样式，可以在这里添加 */    
}  
  
/* 设置.a的样式，作为旋转的父容器 */  
.a{  
    position: relative; /* 设置相对定位 */  
    perspective: 1600px; /* 设置3D变换的透视距离，影响3D元素看起来的深度 */  
    top: 0; /* 顶部偏移为0，这里实际没有变化效果，因为父元素没有定位 */  
    display: flex; /* 使用Flex布局 */  
    justify-content: center; /* 使得子元素在主轴上居中 */  
    align-items: center; /* 使得子元素在交叉轴上居中 */  
}  
  
/* 设置.b的样式，它将包含多个要旋转的子元素 */  
.b{  
    width: 400px; /* 设置宽度 */  
    height: 250px; /* 设置高度 */  
    position: absolute; /* 设置为绝对定位 */  
    transform-style: preserve-3d; /* 保持子元素的3D变换效果 */  
    animation: a 8s infinite cubic-bezier(0.075, 0.82, 0.165, 1); /* 应用名为a的动画，持续8秒，无限循环，使用指定的缓动函数 */  
}  
  
/* 设置.b内部的div的样式，这些将是被旋转的元素 */  
.b div{  
    position: absolute; /* 设置为绝对定位 */  
    background-size: cover; /* 背景图片覆盖整个元素 */  
    opacity: .9; /* 设置透明度为0.9 */  
    width: 400px; /* 设置宽度 */  
    height: 250px; /* 设置高度 */  
    transform: rotateY(calc(var(--i)*120deg)) translateZ(600px) ; /* 使用rotateY和translateZ进行3D变换，--i是自定义属性，控制旋转角度 */  
}  
  
/* 定义名为a的动画 */  
@keyframes a{  
    0%{  
        transform: translateZ(-100px) rotateY(0); /* 动画开始时，元素在Z轴上向后移动100px，不旋转 */  
    }  
    33%{  
        transform: translateZ(-100px) rotateY(-120deg); /* 动画进行到33%时，元素旋转-120度 */  
    }  
    66%{  
        transform: translateZ(-100px) rotateY(-240deg); /* 动画进行到66%时，元素旋转-240度 */  
    }  
    100%{  
        transform: translateZ(-100px) rotateY(-360deg); /* 动画结束时，元素旋转-360度（即回到原点） */  
    }  
}  
  
/* 设置.c的样式，背景图片/  
.c{  
    background-image: url(图片地址); /* 设置背景图片 */  
}  
  
/* 设置.d的样式，背景图片/  
.d{  
    background-image: url(图片地址); /* 设置背景图片 */  
}  
  
/* 设置.e的样式，背景图片/  
.e{  
    background-image: url(图片地址); /* 设置背景图片 */  
}
    </style>
</head>
<body>
    <div class="旋转盒子">
        <div class="a">
            <div class="b">
                <div class="c" style="--i:0"></div>
                <div class="d" style="--i:1"></div>
                <div class="e" style="--i:2"></div>
            </div>
        </div>
    </div>
    
</body>
</html>
Author: Jie
Link: https://wsj-iwakiwjlag.github.io/2024/07/21/CSS3D%E5%8F%98%E6%8D%A2/
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint polocy. If reproduced, please indicate source Jie !
No tag
赏
 Previous
2024-07-21 Jie
Next 
2024-06-02 Jie
  TOC