css过渡、动画3D环绕相册

以下是八面环绕相册

 

* {
  padding: 0;
  margin: 0;
}
body {
  perspective: 800px;
}
ul {
  list-style: none;
  position: relative;
  margin: 150px auto;
  width: 200px;
  transform-style: preserve-3d;
  transform: rotateY(30deg) rotateX(-20deg);
  animation: boxRotate 5s linear infinite ;
}
@keyframes boxRotate {
  0% {
    transform: perspective(800px) rotateY(30deg) rotateX(-20deg) rotateY(0deg);
  }
  100% {
    transform: perspective(800px) rotateY(30deg) rotateX(-20deg) rotateY(360deg);
  }
}
ul li {
  width: 150px;
  height: 150px;
  position: absolute;
  text-align: center;
  line-height: 200px;
  font-size: 40px;
  border: 1px solid black;
  background-size: 150px 150px;
}
ul :first-child {
  transform: translateZ(200px);
  background-image: url(../img/baby.png);
}
ul :nth-child(2) {
  transform: rotateY(45deg) translateZ(200px);
  background-image: url(../img/chenhe.png);
}
ul :nth-child(3) {
  transform: rotateY(90deg) translateZ(200px);
  background-image: url(../img/dilireba.png);
}
ul :nth-child(4) {
  transform: rotateY(135deg) translateZ(200px);
  background-image: url(../img/u1.jpg);
}
ul :nth-child(5) {
  transform: rotateY(180deg) translateZ(200px);
  background-image: url(../img/u2.jpg);
}
ul :nth-child(6) {
  transform: rotateY(225deg) translateZ(200px);
  background-image: url(../img/u3.jpg);
}
ul :nth-child(7) {
  transform: rotateY(270deg) translateZ(200px);
  background-image: url(../img/u4.jpg);
}
ul :last-child {
  transform: rotateY(-45deg) translateZ(200px);
  background-image: url(../img/u6.jpg);
}

立体相册中间嵌套小立体相册并整体旋转

    

        
right
        
left
        
top
        
bottom
        
font
        
back


        
right
        
left
        
top
        
bottom
        
font
        
back
    

/* 立体相册样式 */
.bigbox {
    width: 300px;
    height: 300px;
    margin: 150px auto;
    /* background-color: gray; */
    position: relative;
    
    /* opacity: 0.8; */
    /* 让子元素具有3d效果 */
    transform-style:preserve-3d;
    /* 景深透视 */
    transform:perspective(800px) rotateX(45deg) rotateY(30deg);
    animation: boxRotate 5s linear infinite ;
    
}
.smbox{
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
@keyframes boxRotate{
    0%{
        transform:perspective(800px) rotateX(0deg) rotateY(0deg);
    }
    100%{
        transform:perspective(800px) rotateX(360deg) rotateY(360deg);
    }
}


.bigbox div {
    
    background-color: lightcoral;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0.8;
    background-size: 100% 100%;
    box-shadow: 0 0 10px skyblue;
}
.right{
    width: 300px;
    height: 300px;
    transform: translateX(150px) rotateY(90deg);
    background-image: url(img/xu1.jpg);
}
.mright{
    width: 100px;
    height: 100px;
    transform: translateX(50px) rotateY(90deg);
    background-image: url(img/xu1.jpg);
}
.bigbox:hover .right{
    transform: translateX(150px) rotateY(90deg) translateZ(100px);

}

.left{
    width: 300px;
    height: 300px;
    transform: translateX(-150px) rotateY(-90deg);
    background-image: url(img/xu2.jpg);
}
.mleft{
    width: 100px;
    height: 100px;
    transform: translateX(-50px) rotateY(-90deg);
    background-image: url(img/xu2.jpg);
}
.bigbox:hover .left{
    transform: translateX(-150px) rotateY(-90deg) translateZ(100px);

}

.font{
    width: 300px;
    height: 300px;
    transform: translateZ(150px);
    background-image: url(img/xu3.jpg);
}
.mfont{
    width: 100px;
    height: 100px;
    transform: translateZ(50px);
    background-image: url(img/xu3.jpg);
}
.bigbox:hover .font{
    transform: translateZ(150px) translateZ(100px);

}

.back{
    width: 300px;
    height: 300px;
    transform: translateZ(-150px);
    background-image: url(img/xu4.jpg);
}
.mback{
    width: 100px;
    height: 100px;
    transform: translateZ(-50px);
    background-image: url(img/xu4.jpg);
}
.bigbox:hover .back{
    transform: translateZ(-150px) translateZ(-100px);

}

.top{
    width: 300px;
    height: 300px;
    transform: translateY(-150px) rotateX(90deg);
    background-image: url(img/xu5.jpg);
}
.mtop{
    width: 100px;
    height: 100px;
    transform: translateY(-50px) rotateX(90deg);
    background-image: url(img/xu5.jpg);
}
.bigbox:hover .top{
    transform: translateY(-150px) rotateX(90deg) translateZ(100px);

}

.bottom{
    width: 300px;
    height: 300px;
    transform: translateY(150px) rotateX(-90deg);
    background-image: url(img/xu6.jpg);
}
.mbottom{
    width: 100px;
    height: 100px;
    transform: translateY(50px) rotateX(-90deg);
    background-image: url(img/xu6.jpg);
}
.bigbox:hover .bottom{
    transform: translateY(150px) rotateX(-90deg) translateZ(100px);
}