/*背景设置为黑色*/
body{
    background:#ffffff;
}
#photo_box:hover{animation-play-state: paused;}


.responsibility-container {
    position: relative;
    padding: 40px 0;
    width: 100%;
    background-image: url(http://www.yongchanggroup.cn/3d/images/response/bg_3d.png);
    background-position: center;
    background-size: 100% 85%;
    background-repeat: no-repeat;
    background-color: #f6f6f6;
}
.title {
    position: relative;
    text-align: center;
    height: 45px;
    width: 100%;
}
.title-line {
    position: absolute;
    top: 45%;
    left: 30%;
    width: 40%;
    height: 1px;
    background-color: #b9b9b9;
    z-index: 0;
}
.title span {
    position: relative;
    color: #000;
    font-size: 30px;
    line-height: 32px;
    padding-bottom: 5px;
    padding: 0 20px;
    background-color: #f6f6f6;
    line-height: 40px;
}
.title span::before {
    content: '';
    position: absolute;
    top: 50%;
    margin-top: -5px;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    behavior: url(/cms-chng-theme/js/PIE.htc);
    -ms-behavior: url(/cms-chng-theme/js/PIE.htc);
    border: 1px solid #b9b9b9;
}
.title span::after {
    content: '';
    position: absolute;
    top: 50%;
    margin-top: -5px;
    right: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    behavior: url(/cms-chng-theme/js/PIE.htc);
    -ms-behavior: url(/cms-chng-theme/js/PIE.htc);
    border: 1px solid #b9b9b9;
}
.caursel3d {
    display: block;
    position: relative;
    margin: auto;
}

.caursel3d {
    width: 336px;
    height: 308px;
    bottom: 50px;
    perspective: 2100px;
}

/*设置相册盒子大小、位置、外边框、旋转参数*/
#photo_box{
    width: 380px;
    height: 400px;
    position:relative;
    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: 100%;
    
    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(45deg) translateZ(500px);
}
#photo_box img:nth-child(3){
    transform: rotateY(90deg) translateZ(500px);
}
#photo_box img:nth-child(4){
    transform: rotateY(135deg) translateZ(500px);
}
#photo_box img:nth-child(5){
    transform: rotateY(180deg) translateZ(500px);
}
#photo_box img:nth-child(6){
    transform: rotateY(225deg) translateZ(500px);
}
#photo_box img:nth-child(7){
    transform: rotateY(270deg) translateZ(500px);
}
#photo_box img:nth-child(8){
    transform: rotateY(315deg) translateZ(500px);
}
#photo_box img:nth-child(9){
    transform: rotateY(360deg) translateZ(500px);
}


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

@keyframes run {
0% {
    transform: rotateY(0deg);
}
100% {
    transform: rotateY(-360deg);
}
}
/*@keyframes run {
    0%{transform: rotateX(0deg) rotateY(0deg);
    }
    25%{transform: rotateX(5deg) rotateY(90deg);
    }
    50%{transform: rotateX(0deg) rotateY(180deg);
    }
    75%{transform: rotateX(-5deg) rotateY(270deg);
    }
    100%{transform: rotateX(0deg) rotateY(360deg);
    }
}*/
————————————————
版权声明：本文为CSDN博主「药菌」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_22170875/article/details/89482325