HTML实现3D相册 | 易学教程

<style>
.big_box{    position: relative;    border: 1px solid red;    width: 600px;    height: 600px;    margin: 150px auto;}

.box{    position: absolute;    top: 25%;    left: 25%;    width: 50%;    height: 50%;    border: 1px solid black;    transform-style: preserve-3d;    /*perspective: 500px;*/    animation: r1 8s linear infinite;    /* margin:0 auto; */		cursor:cell;/* cursor 是鼠标经过时的样式 */}    

.box:hover{        transform:rotate(360deg) rotateX(360deg) rotate(360deg);    }

.box>div{    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;    opacity:0.6;    transition: 1.2s;/*  动画过度时间  */}

.c1{        background-color:aqua;        transform: translateZ(-150px);}

.c2{        background-color: red;        transform:rotateY(90deg) translateZ(150px);}

.c3{        background-color:green;      transform:rotateY(-90deg) translateZ(150px);}

.c4{       background-color:orangered;            transform: translateZ(150px);}

.c5{        background-color:lawngreen;       transform:rotatex(-90deg) translateZ(150px);}

.c6{       background-color:mediumorchid;      transform:rotatex(90deg) translateZ(150px);}

.box:hover .c1{     transform: translateZ(-300px);}

.box:hover .c2{     transform:rotateY(90deg) translateZ(300px);}

.box:hover .c3{     transform:rotateY(-90deg) translateZ(300px);}

.box:hover .c4{    transform:rotateY(0deg) translateZ(300px);}

.box:hover .c5{     transform:rotatex(-90deg) translateZ(300px);}

.box:hover .c6{     transform:rotatex(90deg) translateZ(300px);}

@keyframes r1{    from{        transform: rotateY(0deg) rotateX(0deg);    }    to{        transform: rotateY(360deg) rotateX(360deg);    }}

@-webkit-keyframes r1{    from{        transform: rotateY(0deg) rotateX(0deg);    }   
 to{        transform: rotateY(360deg) rotateX(360deg);    }}
 </style>
 <body>    
<div class="big_box">        
 <div class="box">            
   <div class="c1"></div>            
   <div class="c2"></div>            
   <div class="c3"></div>            
   <div class="c4"></div>            
   <div class="c5"></div>            
   <div class="c6"></div>         
</div>   
</div>
</body>
把背景颜色换成背景图片即可😁😁
来源：CSDN
作者：柳州彭于晏
链接：https://blog.csdn.net/weixin_45146319/article/details/103473430
标签
border
position
margin