导语：
女朋友最近生日，我作为浪漫（搞事）专家，怎么能不弄点惊喜呢？于是我的这一件礼物，直接把女朋友感动哭了。
我和女朋友的甜蜜聊天对话！！
那么我是怎么把女朋友感动哭的呢？我们来看看网页相册效果图。
这里我把女朋友的照片换成了她最喜欢的偶像的照片（保命操作，当时我用的是她的照片），是不是很炫酷呢？
瞬间让女生感动哭了。
那么是怎么实现的呢，很简单，只需要html和css就行了，代码直接给你们，换一下图片就行了。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" />
<title>把女朋友感动哭的相册</title>
<style type="text/css"> html {
width:100%;
height:100%;
}
.bigbox {
width:10px;
height:10px;
margin:200px 400px;
position:relative;
}
.box {
width:500px;
height:300px;
margin:0 auto;
transform-style:preserve-3d;
transform:rotateX(-30deg) rotateY(-80deg);
-webkit-animation:mystyle 15s infinite;
animation-timing-function:linear;
}
@-webkit-keyframes mystyle {
from {
transform:rotateX(-180deg) rotateY(-180deg);
}
to {
transform:rotateX(180deg) rotateY(180deg);
}
}.box div {
position:absolute;
width:200px;
height:200px;
opacity:0.8;
transition:all .4s;
}
.bigpic {
width:200px;
height:200px;
}
.box .bigfront {
transform:rotateY(0deg) translateZ(100px);
}
.box .bigback {
transform:translateZ(-100px) rotateY(180deg);
}
.box .bigleft {
transform:rotateY(90deg) translateZ(100px);
}
.box .bigright {
transform:rotateY(-90deg) translateZ(100px);
}
.box .bigtop {
transform:rotateX(90deg) translateZ(100px);
}
.box .bigbottom {
transform:rotateX(-90deg) translateZ(100px);
}
.box span {
display:block;
position:absolute;
width:140px;
height:140px;
top:25px;
left:25px;
}
.box .smallpic {
width:140px;
height:140px;
}
.box .smallleft {
transform:rotateY(90deg) translateZ(70px);
}
.box .smallright {
transform:rotateY(-90deg) translateZ(70px);
}
.box .smalltop {
transform:rotateX(90deg) translateZ(70px);
}
.box .smallbottom {
transform:rotateX(-90deg) translateZ(70px);
}
.box .smallfront {
transform:rotateY(0deg) translateZ(70px);
}
.box .smallback {
transform:translateZ(-70px) rotateY(180deg);
}
/*:hover 我们之前说过的一个css选择器，能够让鼠标指向的时候触发*/ .box:hover .bigleft {
transform:rotateY(90deg) translateZ(300px);
}
.box:hover .bigright {
transform:rotateY(-90deg) translateZ(300px);
}
.box:hover .bigtop {
transform:rotateX(90deg) translateZ(300px);
}
.box:hover .bigbottom {
transform:rotateX(-90deg) translateZ(300px);
}
.box:hover .bigfront {
transform:rotateY(0deg) translateZ(300px);
}
.box:hover .bigback {
transform:translateZ(-300px) rotateY(180deg);
}
</style>
</head>
<body>
<div class="bigbox">
<div class="box">
<div class="bigfront">
<img src="image/1.jpg" class="bigpic" >
</div> <div class="bigback"> <img src="image/2.jpg" class="bigpic"> </div>
<div class="bigleft"> <img src="image/3.jpg" class="bigpic"> </div>
<div class="bigright"> <img src="image/4.jpg" class="bigpic"> </div>
<div class="bigtop"> <img src="image/5.jpg" class="bigpic"> </div>
<div class="bigbottom"> <img src="image/6.jpg" class="bigpic"> </div>
<span class="smallfront"> <img src="image/7.jpg" class="smallpic" /> </span>
<span class="smallback"> <img src="image/8.jpg" class="smallpic" /> </span>
<span class="smallleft"> <img src="image/9.jpg" class="smallpic" /> </span>
<span class="smallright"> <img src="image/10.jpg" class="smallpic" /> </span>
<span class="smalltop"> <img src="image/11.jpg" class="smallpic" /> </span>
<span class="smallbottom"> <img src="image/12.jpg" class="smallpic" /> </span>
</div>
</div>
</body>
</html>
文件夹结构如下：
好了，你们也快去把女朋友感动哭吧！！
没有女朋友怎么办？点个赞，明天我给你分配一个。
本文地址：https://blog.csdn.net/gitchatxiaomi/article/details/108474015
黄山市民网：https://www.huangshanshimin.com/
