前端手写自动旋转3D立方体

上一篇咱们写了一个3D的立方体，但是不能自己旋转，触摸之后可以进行旋转，现在是升级版的是自动旋转的立方体
下面直接是代码

<template>
  <div>
    <div class="top">懵懵懂懂</div>
    <div class="wrap">
      <div class="cube">
        <div class="out-front">
          <img
            src="./../assets/images/psb (11).jpg"
            alt=""
          >
        </div>
        <div class="out-back">
          <img
            src="./../assets/images/psb (12).jpg"
            alt=""
          >
        </div>
        <div class="out-left">
          <img
            src="./../assets/images/psb (19).jpg"
            alt=""
          >
        </div>
        <div class="out-right">
          <img
            src="./../assets/617/微信图片_20191213093412.jpg"
            alt=""
          >
        </div>
        <div class="out-top">
          <img
            src="./../assets/images/psb (38).jpg"
            alt=""
          >
        </div>
        <div class="out-bottom">
          <img
            src="./../assets/images/psb (43).jpg"
            alt=""
          >
        </div>
      </div>
    </div>
  </div>

</template>

<script>
export default {
  data () {
    return {

    }
  },
  components: {
  }
}
</script>

<style scoped lang="less">
* {
  margin: 0 auto;
  padding: 0;
}
html {
  background: #222;
}
div.wrap {
  width: 4.5rem;
  perspective: 1000px; /*景深*/
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%); /*利用位移来处理垂直水平居中*/
}
.wrap > div.cube {
  width: 4.5rem;
  height: 4.5rem;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-50deg) rotateY(-50deg) rotateZ(0deg); /*旋转*/
  animation: move 8s infinite linear; /*动画*/
}
.wrap > div.cube img {
  width: 100%;
  height: 100%;
}
/*关键帧*/
@keyframes move {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}
.cube > div {
  width: 100%;
  height: 100%;
  position: absolute;
  background: #000;
  // border-radius: 20px;
  transition: background 0.4s ease-in-out, box-shadow 0.4s ease-in-out; /*过渡 属性 时间 过渡曲线*/
}
.cube:hover > div {
  background: currentColor;
  box-shadow: 0 0 20px currentColor;
}
.cube div.out-front {
  transform: translateZ(2.25rem); /*转换  位移*/
}
.cube div.out-back {
  transform: translateZ(-2.25rem) rotateY(180deg); /*转换 位移 旋转*/
}
.cube div.out-left {
  transform: translateX(-2.25rem) rotateY(-90deg);
}
.cube div.out-right {
  transform: translateX(2.25rem) rotateY(90deg);
}
.cube div.out-top {
  transform: translateY(-2.25rem) rotateX(90deg);
}
.cube div.out-bottom {
  transform: translateY(2.25rem) rotateX(-90deg);
}
.top {
  height: 1.6rem;
  width: 100%;
  background: #fc8095;
  font-size: 0.533333rem; /* 40/75 */
  font-family: STKaiti, LiSu, KaiTi;
  text-align: center;
  line-height: 1.6rem;
}
</style>

由于是在移动端写的，所以用rem单位作为适配

来源：CSDN

作者：-阿灿-

链接：https://blog.csdn.net/weixin_44986077/article/details/103584581