冠状病毒确诊人数越来越少，希望马上可以完全结束，在家无聊 今天给女朋友做了一个3D相册，给大家分享一下。废话就不多说了，直接给大家上代码吧，你们也可以给自己的女朋友做一个哦,拷贝代码修改图片地址就可以了。

html：

<div class="show">

<div class="box">

<img src="../photoAlbum/picture/1.jpg" class="img1">

<img src="../photoAlbum/picture/2.jpg" class="img2">

<img src="../photoAlbum/picture/3.jpg" class="img3">

<img src="../photoAlbum/picture/4.jpg" class="img4">

<img src="../photoAlbum/picture/5.jpg" class="img5">

<img src="../photoAlbum/picture/6.jpg" class="img6">

<img src="../photoAlbum/picture/7.jpg" class="img7">

<img src="../photoAlbum/picture/8.jpg" class="img8">

<img src="../photoAlbum/picture/9.jpg" class="img9">

<img src="../photoAlbum/picture/10.jpg" class="img10">

</div>

</div>

css:

body {

background:#FF83FA;

perspective:5000px;

}

.show {

perspective:5000px;

-webkit-transform:rotateX(-45deg);

-moz-transform:rotateX(-45deg);

transform:rotateX(-45deg);

transform-style:preserve-3d;

}

.box {

position:relative;

width:200px;

height:250px;

border:1px solid red;

margin:230px auto;

background:url(../photoAlbum/picture/11.jpg);

transform-style:preserve-3d;

-webkit-animation:rotate1 20s linear infinite;

-moz-animation:rotate1 20s linear infinite;

animation:rotate1 20s linear infinite;

}

.box img {

width:150px;

height:250px;

border:1px solid #ccc;

position:absolute;

left:0;

top:0;

-webkit-box-reflect:below 20px -webkit-linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,0) 30%,rgba(250,250,250,0.5));

}

.img1 {

-webkit-transform:translateZ(300px);

-moz-transform:translateZ(300px);

transform:translateZ(300px);

}

.img2 {

-webkit-transform:rotateY(36deg) translateZ(300px);

-moz-transform:rotateY(36deg) translateZ(300px);

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

}

.img3 {

-webkit-transform:rotateY(72deg) translateZ(300px);

-moz-transform:rotateY(72deg)g) translateZ(300px);

transform:rotateY(72deg) (300px);

}

.img4 {

-webkit-transform:rotateY(108deg) translateZ(300px);

-moz-transform:rotateY(108deg) translateZ(300px);

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

}

.img5 {

-webkit-transform:rotateY(144deg) translateZ(300px);

-moz-transform:rotateY(144deg) translateZ(300px);

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

}

.img6 {

-webkit-transform:rotateY(180deg) translateZ(300px);

-moz-transform:rotateY(180deg) translateZ(300px);

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

}

.img7 {

-webkit-transform:rotateY(216deg) translateZ(300px);

-moz-transform:rotateY(216deg) translateZ(300px);

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

}

.img8 {

-webkit-transform:rotateY(252deg) translateZ(300px);

-moz-transform:rotateY(252deg) translateZ(300px);

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

}

.img9 {

-webkit-transform:rotateY(288deg) translateZ(300px);

-moz-transform:rotateY(288deg) translateZ(300px);

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

}

.img10 {

-webkit-transform:rotateY(324deg) translateZ(300px);

-moz-transform:rotateY(324deg) translateZ(300px);

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

}

@-moz-keyframes rotate1 {

0% {

-webkit-transform:rotateY(0deg);

-moz-transform:rotateY(0deg);

transform:rotateY(0deg);

}

100% {

-webkit-transform:rotateY(360deg);

-moz-transform:rotateY(360deg);

transform:rotateY(360deg);

}

}@-webkit-keyframes rotate1 {

0% {

-webkit-transform:rotateY(0deg);

-moz-transform:rotateY(0deg);

transform:rotateY(0deg);

}

100% {

-webkit-transform:rotateY(360deg);

-moz-transform:rotateY(360deg);

transform:rotateY(360deg);

}

}

效果如下：

最后，我自己是一名从事了多年开发的JAVA老程序员，今年年初我整理了一份最适合初学者学习的java学习干货，可以送给每一位喜欢java的小伙伴，想要获取的可以关注我的头条号并在后台私信我：交流，即可免费获取。