
.rotate[data-v-ec3853b0] {
  transform: rotateY(180deg); /* 水平镜像翻转 */
}
.cube[data-v-ec3853b0] {
  width: 0.5rem;
  height: 0.5rem;
  float: left;
  -webkit-transform-style: preserve-3d;
  /*-webkit-transform: rotateX(45deg) rotateY(-45deg);*/
}
.styleLeft[data-v-ec3853b0] {
  position: absolute;
  width: 1rem;
  height: 0.5rem;
  box-sizing: border-box;
  border-radius: 0.05rem;
  margin-left: 0.5rem;
}
.styleRight[data-v-ec3853b0] {
  position: absolute;
  width: 1rem;
  height: 0.5rem;
  box-sizing: border-box;
  border-radius: 0.05rem;
  margin-left: -1rem;
}
.styleTop[data-v-ec3853b0] {
  position: absolute;
  width: 0.5rem;
  height: 1rem;
  box-sizing: border-box;
  border-radius: 0.05rem;
}
.styleBottom[data-v-ec3853b0] {
  position: absolute;
  width: 0.5rem;
  height: 1rem;
  box-sizing: border-box;
  border-radius: 0.05rem;
  margin-top: -0.5rem;
}
.line-border[data-v-ec3853b0] {
  border: 1px solid #333;
}
.style1[data-v-ec3853b0] {
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  box-sizing: border-box;
}

/*前面 沿着Z轴前移150px*/
.cube .front[data-v-ec3853b0] {
  transform: translateZ(50%);
  -ms-transform: translateZ(50%);
  -webkit-transform: translateZ(50%);
}

/*后面 沿着Z轴后移150px*/
.cube .back[data-v-ec3853b0] {
  transform: translateZ(50%) rotateY(180deg);
  -ms-transform: translateZ(50%) rotateY(180deg);
  -webkit-transform: translateZ(50%) rotateY(180deg);
}

/*左面 沿着Y轴旋转270度，然后沿着X轴左移一半*/
.cube .left[data-v-ec3853b0] {
  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-ec3853b0] {
  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-ec3853b0] {
  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-ec3853b0] {
  transform: rotateX(270deg) translateY(50%);
  -ms-transform: rotateX(270deg) translateY(50%);
  -webkit-transform: rotateX(270deg) translateY(50%);
  transform-origin: bottom;
}

.stage[data-v-9d02e6f2] {
  margin-top: 0.2rem;
  position: absolute;
  left: 0;
  top: 20%;
  width: 100%;
  height: 13%;
  -webkit-perspective: 25rem;
  margin-left: 2rem;
}
.bigCube[data-v-9d02e6f2] {
  -webkit-transform-style: preserve-3d;
}
.magicBox[data-v-9d02e6f2] {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  transform: rotateX(-20deg) rotateY(-10deg) rotateZ(0deg);
  /*-webkit-transform: rotateX(45deg) rotateY(-45deg) rotateZ(0deg);*/
}
.magicBox1[data-v-9d02e6f2] {
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
.magicBox2[data-v-9d02e6f2] {
  transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
}
.box[data-v-9d02e6f2] {
  width: 6rem;
  height: 3rem;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: 0px;
  -webkit-transform-style: preserve-3d;
}
.box1[data-v-9d02e6f2] {
  position: absolute;
  left: 2.5rem;
  margin-top: 0px;
  -webkit-transform-style: preserve-3d;
}
.box2[data-v-9d02e6f2] {
  position: absolute;
  left: 5rem;
  margin-top: 0px;
  -webkit-transform-style: preserve-3d;
}
.box3[data-v-9d02e6f2] {
  position: absolute;
  margin-top: 0px;
  -webkit-transform-style: preserve-3d;
}
.frontBox[data-v-9d02e6f2] {
  -webkit-transform: translateZ(1rem);
}
.backBox[data-v-9d02e6f2] {
  -webkit-transform: translateZ(-1rem);
}
[data-v-9d02e6f2] .el-dialog__body {
  height: 8rem;
}

