纯HTML加CSS实现3D立体动态相册【超简单、附源码】 CSS

近日，收到一男粉丝私信，具体如下：
文章图片

文章图片

PS：在跟他聊天过程中，我不该笑的，哪个男同胞没有这么让人心疼的一刻呢。所以，在此祝愿他能早日哄好他的女朋友，加油，奥利给~~~
于是，在他的万般焦急等待下，为他量身定做的动态相册出炉了，鉴于时间紧任务重，实现的功能比较单一，但是他已经很满足了，我也很欣慰！
先来看一下效果：

具体代码如下：

加油 - 锐客网 ="text/css"> *{margin: 0; padding: 0; }.wrap{width: 600px; height: 400px; margin: 200px auto; } .box{width: 200px; height: 200px; margin: 100px auto; position: relative; transition: all 3s; transform-style: preserve-3d; animation: move 3s infinite linear alternate; } .box>div{width: 200px; height: 200px; font-size: 60px; opacity: .5; position: absolute; top: 0; left: 0; transition: all 1s; }.box img{width: 200px; height: 200px; }.left{transform: rotateY(90deg) translateZ(-100px); } .right{transform: rotateY(90deg) translateZ(100px); } .top{transform: rotateX(90deg) translateZ(100px); } .bottom{transform: rotateX(90deg) translateZ(-100px); } .after{transform: translateZ(-100px); } .before{transform: translateZ(100px); }.wrap .box:hover .left{transform: rotateY(90deg) translateZ(-160px); } .wrap .box:hover .right{transform: rotateY(90deg) translateZ(160px); } .wrap .box:hover .top{transform: rotateX(90deg) translateZ(160px); } .wrap .box:hover .bottom{transform: rotateX(90deg) translateZ(-160px); } .wrap .box:hover .after{transform: translateZ(-160px); } .wrap .box:hover .before{transform: translateZ(160px); }@keyframes move{ from{transform: rotateX(0deg) rotateY(0deg); } to{transform: rotateX(13deg) rotateY(720deg); } } 文章图片文章图片文章图片文章图片文章图片文章图片