@keyframes rotate{
    0%{
        transform:rotateX(0deg) rotateY(0deg);
    }
    100%{
        transform:rotateX(0deg) rotateY(360deg);
    }
}
.wrap{
    position:fixed;
    bottom:10%;
    right: 10%;
    z-index: 10;
    perspective: 1000px; /* 视图距元素的距离 相当于摄像机 */
    animation:run-wrap 20s 1 linear;
}
.cube{
    width:50px;
    height:50px;
    position:relative;
    color:#fff;
    font-size:36px;
    font-weight:bold;
    text-align:center;
    line-height:50px;
    transform-style:preserve-3d; /* 默认flat 2D */
    transform:rotateX(-30deg) rotateY(-70deg); 
    animation:rotate 20s infinite linear; /*播放时间 播放次数为循环 缓动效果为匀速 */
}
.cube >  .photo{
    width:100%;
    height:100%;
    border:1px solid #fff;
    position:absolute;
    background-color:#333;
    opacity:.6;
    transition:transform 0.4s ease-in;
    top:0px;
    left:0px;
}
.cube .out-front{
    transform: translateZ(25px);
}
.cube .out-back{
    transform: translateZ(-25px) rotateY(180deg);
}
.cube .out-left{
    transform: translateX(-25px) rotateY(-90deg);
}
.cube .out-right{ 
    transform: translateX(25px) rotateY(90deg);
}
.cube .out-top{
    transform: translateY(-25px) rotateX(90deg);
}
.cube .out-bottom{
    transform: translateY(25px) rotateX(-90deg);
}
.cube > img{
    display:block;
    width:50px;
    height:50px;
    border:1px solid black;
    background-color:#999;
    position:absolute;
    top:25px;
    left:25px;
}
.cube .in-front{
    transform: translateZ(25px);
}
.cube .in-back{
    transform: translateZ(-25px) rotateY(180deg);
}
.cube .in-left{
    transform: translateX(-25px) rotateY(-90deg);
}
.cube .in-right{
    transform: translateX(25px) rotateY(90deg);
}
.cube .in-top{
   transform: translateY(-25px) translateX(-25px) rotateX(0deg);
}
.cube .in-bottom{
    transform: translateX(-25px) translateY(25px) rotateX(0deg);
}
.wrap:hover .out-front{
    transform: translateZ(100px);
}
.wrap:hover .out-back{
    transform: translateZ(-100px) rotateY(180deg);
}
.wrap:hover .out-left{
    transform: translateX(-100px) rotateY(-90deg);
}
.wrap:hover .out-right{
    transform: translateX(100px) rotateY(90deg);
}
.wrap:hover .out-top{
    transform: translateY(-100px) rotateX(90deg);
}
.wrap:hover .out-bottom{
    transform: translateY(100px) rotateX(-90deg);
}
#home {
    margin: 0 auto;
    width: 85%;
    min-width: 950px;
    background-color: rgba(255,255,255,0.8);
    padding: 30px;
    margin-top: 50px;
    margin-bottom: 50px;
    box-shadow: 0 2px 6px rgb(100 100 100 / 30%);
}
body{
    background: url(https://dss1.bdstatic.com/kvoZeXSm1A5BphGlnYG/skin/320.jpg) no-repeat fixed center/100% 100%;
}
#blog-news {
    text-align: center;
}
/** 表格居中*/
table {
margin: auto;
}