*{
    padding:0;
    margin:0;
}
#video-background {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: -1;
    }
#react{
   width: 200px;
    height:200px;
    margin: 275px auto;
    transform-style:preserve-3d;
	/* animation: moveInOut 6s infinite alternate; */
    animation:rotate 10s infinite alternate;
	/* animation:openAnimation 1s ease forwards; */
    animation-timing-function: linear;
	transform-origin: center center; /* 确保围绕中心点旋转 */
}

#react div{
    position:absolute;
    transition: all 3s;
}
div .out_pic{
    width:300px;
    height:300px;
    opacity:0.80;
}

div .in_pic {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#react span{
    display:block;
    position:absolute;
    width:100px;
    height:100px;
    top:100px;
    left:100px;
}
@keyframes rotate{
   /* from{transform: rotateX(0deg) rotateY(0deg);}
    to{transform: rotateX(180deg) rotateY(180deg);} */
	from{transform: rotateX(0deg) rotateY(0deg)}
	to{transform: rotateX(35deg) rotateY(360deg)}
}

  
.out_front{
    transform:translateZ(150px);
}
.out_back{
    transform:translateZ(-150px);
}
.out_left{
    transform:rotateY(90deg) translateZ(150px);
}
.out_right{
    transform: rotateY(-90deg) translateZ(150px);
}
.out_top{
    transform:rotateX(90deg) translateZ(150px);
}
.out_bottom{
    transform: rotateX(-90deg) translateZ(150px);
}
.in_front{
    transform:translateZ(100px);
}
.in_back{
    transform:translateZ(-100px);
}
.in_left{
    transform:rotateY(90deg) translateZ(100px);
}
.in_right{
    transform: rotateY(-90deg) translateZ(100px);
}
.in_top{
    transform:rotateX(90deg) translateZ(100px);
}
.in_bottom{
    transform: rotateX(-90deg) translateZ(100px);
}
  
/*外面的图片散开*/
#react:hover .out_front{
    transform:translateZ(300px);
}
#react:hover .out_back{
    transform:translateZ(-300px);
}
#react:hover .out_left{
    transform:rotateY(90deg) translateZ(300px);
}
#react:hover .out_right{
    transform: rotateY(-90deg) translateZ(300px);
}
#react:hover .out_top{
    transform:rotateX(90deg) translateZ(300px);
}
#react:hover .out_bottom{
    transform: rotateX(-90deg) translateZ(300px);
}
  
  
/*里面的图片散开*/
/* #react:hover .in_front{
    transform:translateZ(150px);
}
#react:hover .in_back{
    transform:translateZ(-150px);
}
#react:hover .in_left{
    transform:rotateY(90deg) translateZ(150px);
}
#react:hover .in_right{
    transform: rotateY(-90deg) translateZ(150px);
}
#react:hover .in_top{
    transform:rotateX(90deg) translateZ(150px);
}
#react:hover .in_bottom{
    transform: rotateX(-90deg) translateZ(150px);
}  */
 
@charset "utf-8";
/* CSS Document */