html css3 旋转

时遇¥.¥..

已于 2022-07-22 08:41:59 修改

阅读量133

点赞数

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

于 2022-07-21 17:29:18 首次发布

本文链接：https://blog.csdn.net/weixin_46544600/article/details/125917245

版权

笔记同时被 3 个专栏收录

51 篇文章 2 订阅

订阅专栏

vue

14 篇文章 0 订阅

订阅专栏

css

9 篇文章 0 订阅

订阅专栏

图片需要自己替换一下

<!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 vue</title>
  <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>