@charset "UTF-8";
.rotate[data-v-02a76bc8] {
  transform: rotateY(180deg);
  /* 水平镜像翻转 */
}
.cube[data-v-02a76bc8] {
  width: 1rem;
  height: 1rem;
  float: left;
  -webkit-transform-style: preserve-3d;
  /*-webkit-transform: rotateX(45deg) rotateY(-45deg);*/
}
.style[data-v-02a76bc8] {
  position: absolute;
  width: 1rem;
  height: 1rem;
  box-sizing: border-box;
  border-radius: 0.05rem;
  border: 2px solid #333;
}
.style1[data-v-02a76bc8] {
  position: absolute;
  width: 1rem;
  height: 1rem;
  box-sizing: border-box;
}

/*前面 沿着Z轴前移150px*/
.cube .front[data-v-02a76bc8] {
  transform: translateZ(50%);
  -ms-transform: translateZ(50%);
  -webkit-transform: translateZ(50%);
}

/*后面 沿着Z轴后移150px*/
.cube .back[data-v-02a76bc8] {
  transform: translateZ(50%) rotateY(180deg);
  -ms-transform: translateZ(50%) rotateY(180deg);
  -webkit-transform: translateZ(50%) rotateY(180deg);
}

/*左面 沿着Y轴旋转270度，然后沿着X轴左移一半*/
.cube .left[data-v-02a76bc8] {
  transform: rotateY(-90deg) translateX(-50%);
  -ms-transform: rotateY(-90deg) translateX(-50%);
  -webkit-transform: rotateY(-90deg) translateX(-50%);
  transform-origin: left;
}

/*右面 沿着Y轴旋转-270度，然后沿着X轴右移一半*/
.cube .right[data-v-02a76bc8] {
  transform: rotateY(90deg) translateX(50%);
  -ms-transform: rotateY(90deg) translateX(50%);
  -webkit-transform: rotateY(90deg) translateX(50%);
  transform-origin: right;
}

/*上面 沿着X轴旋转-270度，然后沿着Y轴上移一半*/
.cube .top[data-v-02a76bc8] {
  transform: rotateX(-270deg) translateY(-50%);
  -ms-transform: rotateX(-270deg) translateY(-50%);
  -webkit-transform: rotateX(-270deg) translateY(-50%);
  transform-origin: top;
}

/*下面 沿着X轴旋转270度，然后沿着Y轴下移一半*/
.cube .bottom[data-v-02a76bc8] {
  transform: rotateX(270deg) translateY(50%);
  -ms-transform: rotateX(270deg) translateY(50%);
  -webkit-transform: rotateX(270deg) translateY(50%);
  transform-origin: bottom;
}
@keyframes animation-02a76bc8 {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
.box[data-v-02a76bc8] {
  display: flex;
  /*将容器设置为伸缩盒,和设置float效果一样*/
  flex-wrap: wrap;
  /*换行*/
  margin: 0 auto;
  width: 0.8rem;
  height: 0.8rem;
  /*border:1px solid red;*/
  position: relative;
  /*相对*/
}
.box-moving[data-v-02a76bc8] {
  display: flex;
  /*将容器设置为伸缩盒,和设置float效果一样*/
  flex-wrap: wrap;
  /*换行*/
  margin: 0 auto;
  width: 0.8rem;
  height: 0.8rem;
  /*border:1px solid red;*/
  position: relative;
  /*相对*/
  animation-name: animation-02a76bc8;
  /*动画名称*/
  animation-duration: 1s;
  /*动画持续时间*/
  animation-iteration-count: infinite;
  /*循环次数infinite无限循环*/
  animation-timing-function: linear;
  /*动画的过度类型  linear线性过渡*/
}
.box[data-v-02a76bc8]:hover {
  animation-play-state: paused;
  /*当鼠标按下时暂停*/
}
.circle[data-v-02a76bc8] {
  position: absolute;
  /*绝对*/
  left: 0.37rem;
  top: 0.37rem;
  width: 0.05rem;
  height: 0.05rem;
  border-radius: 0.05rem;
  background: #000;
}
.box1[data-v-02a76bc8] {
  width: 0.4rem;
  height: 0.2rem;
  background: #ccc;
  border-radius: 0.2rem 0.2rem 0 0;
  /*左上角,右上角,右下角,左下角*/
  margin-top: 0.2rem;
}
.box2[data-v-02a76bc8] {
  width: 0.2rem;
  height: 0.4rem;
  background: #ccc;
  border-radius: 0 0.2rem 0.2rem 0;
}
.box3[data-v-02a76bc8] {
  width: 0.2rem;
  height: 0.4rem;
  background: #ccc;
  border-radius: 0.2rem 0 0 0.2rem;
  margin-top: 0.4rem;
  margin-left: -0.4rem;
}
.box4[data-v-02a76bc8] {
  width: 0.4rem;
  height: 0.2rem;
  background: #ccc;
  border-radius: 0 0 0.2rem 0.2rem;
  margin-top: 0.4rem;
}