旋转木马动画

image-20240127165501705

相当于改变xyz这三个轴

image-20240127165452849

  • 控制Y轴进行旋转，每张图片旋转36deg，rotateY(36deg)

  • 使用一个动画，将照片进行旋转，使用keyframes动画

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
101
102
103
104
<!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 {
            perspective: 10000px;
        }
        #box {
            position: relative;
            width: 100px;
            height: 200px;
            margin: 100px auto;
            transform-style: preserve-3d;
            animation: myrotate 10s linear infinite;
        }
        @keyframes myrotate{
            from {
                transform: rotateY(0);
            }
            to {
                transform: rotateY(360deg);
            }
        }
        .item {
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 200px;
        }
        .item img {
            width: 100px;
            height: 200px;
        }
        .item01 {
            transform: translateZ(300px);
        }
        .item02 {
            transform: rotateY(36deg) translateZ(300px);
        }
        .item03 {
            transform: rotateY(72deg) translateZ(300px);
        }
        .item04 {
            transform: rotateY(108deg) translateZ(300px);
        }
        .item05 {
            transform: rotateY(144deg) translateZ(300px);
        }
        .item06 {
            transform: rotateY(180deg) translateZ(300px);
        }
        .item07 {
            transform: rotateY(216deg) translateZ(300px);
        }
        .item08 {
            transform: rotateY(252deg) translateZ(300px);
        }
        .item09 {
            transform: rotateY(288deg) translateZ(300px);
        }
        .item10 {
            transform: rotateY(324deg) translateZ(300px);
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="item item01">
            <img src="../img/baby.jpg" alt="">
        </div>
        <div class="item item02">
            <img src="../img/baby.jpg" alt="">
        </div>
        <div class="item item03">
            <img src="../img/baby.jpg" alt="">
        </div>
        <div class="item item04">
            <img src="../img/baby.jpg" alt="">
        </div>
        <div class="item item05">
            <img src="../img/baby.jpg" alt="">
        </div>
        <div class="item item06">
            <img src="../img/baby.jpg" alt="">
        </div>
        <div class="item item07">
            <img src="../img/baby.jpg" alt="">
        </div>
        <div class="item item08">
            <img src="../img/baby.jpg" alt="">
        </div>
        <div class="item item09">
            <img src="../img/baby.jpg" alt="">
        </div>
        <div class="item item10">
            <img src="../img/baby.jpg" alt="">
        </div>
    </div>
</body>
</html>