body {
    margin: 0px;
    background: #222 !important;
}


#div2 {

    background-image: url();

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    min-width: 1000px;

    z-index: -10;

    zoom: 1;

    background-color: pink;

    background-repeat: no-repeat;

    background-size: cover;

    -webkit-background-size: cover;

    -o-background-size: cover;

    background-position: center 0;

}

#photo_box {

    width: 280px;

    height: 400px;

    position: fixed;

    left: 0;

    right: 0;

    top: 0;

    bottom: 0;

    margin: 200px auto;

    transform-style: preserve-3d;
    /*表示所有子元素在3D空间中呈现*/

    transform: rotateX(-5deg) rotateY(0deg);

    animation: run 30s linear infinite;
    /*循环执行run动画，每30秒执行一次*/

}



/*设置图像大小、边框、圆角、位置*/

#photo_box img {

    width: 250px;

    height: 350px;

    border: 5px solid #ccc;

    border-radius: 5px;

    position: absolute;

    left: 0;

    top: 0;

}



/*依次设置图像盒子中每个图像旋转后位置*/

#photo_box img:nth-child(1) {

    transform: rotateY(0deg) translateZ(500px);

}

#photo_box img:nth-child(2) {

    transform: rotateY(36deg) translateZ(500px);

}

#photo_box img:nth-child(3) {

    transform: rotateY(72deg) translateZ(500px);

}

#photo_box img:nth-child(4) {

    transform: rotateY(108deg) translateZ(500px);

}

#photo_box img:nth-child(5) {

    transform: rotateY(144deg) translateZ(500px);

}

#photo_box img:nth-child(6) {

    transform: rotateY(180deg) translateZ(500px);

}

#photo_box img:nth-child(7) {

    transform: rotateY(216deg) translateZ(500px);

}

#photo_box img:nth-child(8) {

    transform: rotateY(252deg) translateZ(500px);

}

#photo_box img:nth-child(9) {

    transform: rotateY(288deg) translateZ(500px);

}

#photo_box img:nth-child(10) {

    transform: rotateY(324deg) translateZ(500px);

}

#photo_box img:nth-child(11) {

    transform: rotateY(360deg) translateZ(500px);

}



/*采用@keyframes 规则创建run动画。*/

@keyframes run {

    0% {
        transform: rotateX(0deg) rotateY(0deg);

    }

    25% {
        transform: rotateX(10deg) rotateY(90deg);

    }

    50% {
        transform: rotateX(0deg) rotateY(180deg);

    }

    75% {
        transform: rotateX(-10deg) rotateY(270deg);

    }

    100% {
        transform: rotateX(0deg) rotateY(360deg);

    }

}

#text1 {

    float: left;

    color: #fff;

    width: 150px;

    padding: 12px 0;

    height: 50px;

}

#text2 {

    float: right;

    width: 100px;

    color: #fff;

    padding: 12px 0;

    height: 50px;

}

#text3 {

    float: right;

    width: 100px;

    color: #fff;

    padding: 12px 0;

    height: 50px;

}