html css3 旋转

图片需要自己替换一下

doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <title>cdn vuetitle>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .app-container {
      height: 100vh;
    }

    /*设置相册盒子大小、位置、外边框、旋转参数*/
    .content {
      width: 1px;
      height: 1px;
      position: fixed;
      left: 50%;
      top: 40%;
      transform-style: preserve-3d;
      /*表示所有子元素在3D空间中呈现*/
      transform: rotateX(5deg) rotateY(0deg);
      animation: run 30s linear infinite;
      /*循环执行run动画，每30秒执行一次*/
    }

    /*设置图像大小、边框、圆角、位置*/
    .content img {
      width: 120px;
      height: 160px;
      position: absolute;
      left: -60px;
      top: -80px;
      backface-visibility: hidden; 
      /*这个属性的作用就是翻转过去的内容被隐藏了，所以我们只能看到一个面的内容。就达到了一个卡片2个面切换显示。*/
    }

    /*依次设置图像盒子中每个图像旋转后位置*/
    .content img:nth-child(1) {
      transform: rotateY(0deg) translateZ(300px);
    }

    .content img:nth-child(2) {
      transform: rotateY(30deg) translateZ(300px);
    }

    .content img:nth-child(3) {
      transform: rotateY(60deg) translateZ(300px);
    }

    .content img:nth-child(4) {
      transform: rotateY(90deg) translateZ(300px);
    }

    .content img:nth-child(5) {
      transform: rotateY(120deg) translateZ(300px);
    }

    .content img:nth-child(6) {
      transform: rotateY(150deg) translateZ(300px);
    }

    .content img:nth-child(7) {
      transform: rotateY(180deg) translateZ(300px);
    }

    .content img:nth-child(8) {
      transform: rotateY(210deg) translateZ(300px);
    }

    .content img:nth-child(9) {
      transform: rotateY(240deg) translateZ(300px);
    }

    .content img:nth-child(10) {
      transform: rotateY(270deg) translateZ(300px);
    }

    .content img:nth-child(11) {
      transform: rotateY(300deg) translateZ(300px);
    }

    .content img:nth-child(12) {
      transform: rotateY(330deg) translateZ(300px);
    }

    /*采用@keyframes 规则创建run动画。*/
    @keyframes run {
      0% {
        transform: rotateX(-5deg) rotateY(0deg);
      }

      25% {
        transform: rotateX(-5deg) rotateY(90deg);
      }

      50% {
        transform: rotateX(-5deg) rotateY(180deg);
      }

      75% {
        transform: rotateX(-5deg) rotateY(270deg);
      }

      100% {
        transform: rotateX(-5deg) rotateY(360deg);
      }
    }
  style>
head>

<body>
  <div id="app" class="app-container">
    <div class="content">
      <img v-for="v in newList" :key="v.url" :src="v.url" alt="">
    div>
  div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
  <script>
    var app = new Vue({
      el: '.app-container',
      data: {
        newList: [{
            url: '../images/bg111111.jpg'
          },
          {
            url: '../images/bg111111.jpg'
          },
          {
            url: '../images/bg111111.jpg'
          },
          {
            url: '../images/bg111111.jpg'
          },
          {
            url: '../images/bg111111.jpg'
          },
          {
            url: '../images/bg111111.jpg'
          },
          {
            url: '../images/bg111111.jpg'
          },
          {
            url: '../images/bg111111.jpg'
          },
          {
            url: '../images/bg111111.jpg'
          },
          {
            url: '../images/bg111111.jpg'
          },
          {
            url: '../images/bg111111.jpg'
          },
          {
            url: '../images/bg111111.jpg'
          },
        ],
        count: 0
      },
      created() {
        console.log(this.newList)
      },
      mounted() {},
      methods: {},

    })
  script>
body>

html>
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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179

相关阅读:
前端提交规范 ESLint + Prettier + husky + lint-staged
vue3+ant design vue+ts实战【ant-design-vue组件库引入】
Python—list 和 dict 的复制
 jmeter接口自动化部署jenkins教程
 数据源太多，报表工具该如何兼容？
Tkinter制作股票数据抓取小程序，有点秀！
openstack——5、对搭建的虚拟机拓展（使用私有网络、自主创建镜像）
ssm+vue+elementUI 高校普法系统-#毕业设计
 02Spring框架的特点以及jar包下载
 媒体基础：打开多模态大模型的新思路
原文地址：https://blog.csdn.net/weixin_46544600/article/details/125917245