[JavaScript知识库]vue 3D 立体正方形

<template>
  <div class="stuation">
    <div id="warp">
      <div id="div1">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
        <div class="box3">box3</div>
        <div class="box4">box4</div>
        <div class="box5">box5</div>
        <div class="box6">box6</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {},
  created() {},
  mounted() {}
};
</script>

<style scoped>
.stuation {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
  background-image: url("../../../assets/images/statusbg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

#warp {
  /* 元素距离视图的距离 */
  perspective: 1200px;
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#div1 {
  width: 1.5rem;
  height: 1.5rem;
  position: relative;
  color: white;
  transform-style: preserve-3d;
  font-size: 0.2rem;
  text-align: center;
  line-height: 1rem;
  animation: 10s rotate linear infinite;
}

#div1:hover {
  animation-play-state: paused;
}
@keyframes rotate {
  0% {
    transform: rotatex(-20deg) rotateY(0deg);
  }

  50% {
    transform: rotatex(-20deg) rotateY(180deg);
  }

  100% {
    transform: rotatex(-20deg) rotateY(360deg);
  }
}

.box1,
.box2,
.box3,
.box4,
.box5,
.box6 {
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  transform-style: preserve-3d;
  opacity: 0.6; 
}
.box1 {
  border: 0.01rem solid #00e6ff;
  background: #185f92;
  box-shadow: inset 0px 0px 0.4rem 0px;
  transform: rotateY(0deg) translateZ(.75rem);
}
.box2 {
  border: 0.01rem solid #00e6ff;
  background: #185f92;
  box-shadow: inset 0px 0px 0.4rem 0px;
  transform: rotateY(90deg) translateZ(.75rem);
}
.box3 {
  border: 0.01rem solid #00e6ff;
  background: #185f92;
  box-shadow: inset 0px 0px 0.4rem 0px;
  transform: rotateY(180deg) translateZ(.75rem);
}
.box4 {
  border: 0.01rem solid #00e6ff;
  background: #185f92;
  box-shadow: inset 0px 0px 0.4rem 0px #45b1ff;
  transform: rotateY(270deg) translateZ(.75rem);
}
.box5 {
  border: 0.01rem solid #00e6ff;
  background: linear-gradient(180deg, #285ec6 0%, #29b7ec 100%);
  box-shadow: inset 0px 0px 0.05rem 0px #67eeff;
  transform: rotateX(-90deg) translateZ(.75rem);
}
.box6 {
  border: 0.01rem solid #00e6ff;
  background: linear-gradient(180deg, #285ec6 0%, #29b7ec 100%);
  box-shadow: inset 0px 0px 0.05rem 0px #67eeff;
  transform: rotateX(90deg) translateZ(.75rem);
}
</style>

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖