46.CSS3(旋转相册)

最新推荐文章于 2023-02-07 00:00:00 发布

越努力，越幸运..........

最新推荐文章于 2023-02-07 00:00:00 发布

阅读量210

点赞数

分类专栏： html 文章标签： css3 css html

本文链接：https://blog.csdn.net/weixin_47254130/article/details/122918658

版权

HTML CSS JavaScript 3D动画图像展示

关键词由CSDN通过智能技术生成

html 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<template>
  <div id="app">
    <div class="stage-area">
      <div class="container">
        <img src="./assets/image/12.jpg" />
        <img src="./assets/image/13.jpg" />
        <img src="./assets/image/14.webp" />
        <img src="./assets/image/16.webp" />
        <img src="./assets/image/17.webp" />
        <img src="./assets/image/18.webp" />
        <img src="./assets/image/19.webp" />
        <img src="./assets/image/21.webp" />
        <img src="./assets/image/23.webp" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {};
  },
  mounted() {},
  methods: {},
};
</script>

 <style>
#app {
  background: url("./assets/image/10.jpeg") top center no-repeat;
  width: 100vw;
  height: 100vh;
  background-size: 100% 100%;
}
@keyframes rotating {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
html,
body {
  height: 100%;
  margin: 0;
}
.stage-area {
  perspective: 1000px;
  min-height: 100%;
  perspective-origin: center 30%;
}
.container {
  transform-style: preserve-3d;
  width: 160px;
  position: absolute;
  /*z-index: 3;*/
  top: 45%;
  left: 50%;
  margin-top: -80px;
  margin-left: -80px;
  animation-name: rotating;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.container:hover {
  animation-play-state: paused;
}
.container img {
  border: 3px solid rgba(255, 255, 255, 0.5);
  max-width: 100%;
  position: absolute;
  height: 144px;
}
img {
  max-width: 100%;
  height: 144px;
  position: absolute;
}
.container img:nth-child(1) {
  transform: rotateY(0deg) translateZ(250px);
}
.container img:nth-child(2) {
  transform: rotateY(40deg) translateZ(250px);
}
.container img:nth-child(3) {
  transform: rotateY(80deg) translateZ(250px);
}
.container img:nth-child(4) {
  transform: rotateY(120deg) translateZ(250px);
}
.container img:nth-child(5) {
  transform: rotateY(160deg) translateZ(250px);
}
.container img:nth-child(6) {
  transform: rotateY(200deg) translateZ(250px);
}
.container img:nth-child(7) {
  transform: rotateY(240deg) translateZ(250px);
}
.container img:nth-child(8) {
  transform: rotateY(280deg) translateZ(250px);
}
.container img:nth-child(9) {
  transform: rotateY(320deg) translateZ(250px);
}
body > img:not(:target) {
  z-index: -1;
}
</style>