backend-Tv/pages/image-rotation/image-rotation.vue

<template>
  <div class="container">
    <div class="grid-container">
      <div class="grid-item">
        <image class="img-front" src="/static/image/collected.png" alt="" />
        <image class="img-back" src="/static/image/collected1.png" alt="" />
      </div>
      <div class="grid-item">
        <image class="img-front" src="/static/image/favicon.png" alt=""/>
        <image class="img-back" src="/static/image/favicon1.png" alt=""/>
      </div>
      <div class="grid-item">
        <image class="img-front" src="/static/image/freeok.png" alt="" />
        <image class="img-back" src="/static/image/freeok1.png" alt="" />
      </div>
      <div class="grid-item">
        <image class="img-front" src="/static/image/freeok.png" alt="" />
        <image class="img-back" src="/static/image/freeok1.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        ['/static/image/collected.png'],
        ['/static/image/collected1.png'],
        ['/static/image/favicon.png'],
        ['/static/image/favicon1.png'],
        ['/static/image/freeok.png'],
        ['/static/image/freeok1.png'],
        ['/static/image/fullscreen.png'],
        ['/static/image/fullscreen1.png']
      ],
      isSecondImage: Array(8).fill(false),
      transitionClass: 'fade'
    }
  },
  mounted() {
    setInterval(() => {
      this.isSecondImage = this.isSecondImage.map(item => !item);
      if (typeof document !== 'undefined') {
        const gridItems = document.querySelectorAll('.grid-item');
        gridItems.forEach((item) => {
          console.log('翻转执行')
          const currentRotation = parseInt(item.style.transform.replace('rotateY(', '').replace('deg)', '')) || 0;
          item.style.transform = `rotateY(${(currentRotation + 180) % 360}deg)`;
        });
      }
    }, 3000);
  }
}
</script>

<style>
* {
  /* 清除默认样式 */
  margin: 0;
  padding: 0;
}

body {
  /* 定义变量 */
  --img-width: 180rpx;
  --img-height: 100vh;
}

.container {
  /* 设为flex容器 */
  display: flex;
  /* 设置子元素水平居中 */
  justify-content: center;
  /* 设置子元素垂直居中 */
  align-items: center;
  /* 设置容器宽高为整个可视区的宽高 */
  width: 100vw;
  height: 100vh;
  background-color: #eeffff;
}

.grid-container {
  position: relative;
  /* 设为grid容器 */
  display: grid;
  /* 设置为4列，列宽为200px（图片宽度） */
  grid-template-columns: repeat(4, var(--img-width));
  /* 设为两行，行高为270px（图片高度） */
  grid-template-rows: repeat(1, var(--img-height));
  /* 设置行列间距为20px */
  gap: 10rpx;

  /* 设置观测距离 Z=0 平面*/
  perspective: 1600px;
  /* 设置观测位置 */
  perspective-origin: 50% 50%;
}

.grid-item {
  /* 设为相对定位 */
  position: relative;

  /* 设置过度时间 */
  transition: 2s;
  /* 应用3D转换 */
  transform-style: preserve-3d;
}

.grid-item:hover {
  /* 沿Y轴旋转180° */
  transform: rotateY(180deg);
}

.img-front,
.img-back {
  /* 设为绝对定位 */
  position: absolute;
  /* 距离父元素上边距和左边距均为0 */
  top: 0;
  left: 0;
  /* 图片的默认大小（父盒子的宽高） */
  width: 100%;
  height: 100%;

  border-radius: 6px;
  box-shadow: 0 0 6px 1px #666;

  /* 设置图片背面不可见 */
  backface-visibility: hidden;
}

.img-front {
  /* 提高堆叠顺序 */
  z-index: 2;
}

.img-back {
  /* 卡片反面图默认背面朝向观察者 */
  transform: rotateY(-180deg);
}

</style>