|
|
最近上课学HTML，刚好教了一个3D相册，可以用来表白，希望刀友门别嫌弃
以前图片被我删了..临时找了一个
需要自己改图片宽度高度，<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3D相册</title>
<style>
*{
margin: 0;
padding: 0;
}
body,html{
height: 100%;
}
body{
background: url(lol/9f93200c4e48cf35f563765cea644ade.jpg) no-repeat center;
background-size: 100%;
/* 景深 */
perspective: 2000px;
overflow: hidden;
}
.box{
width: 400px;
height: 400px;
background: url(壁纸/4.jpg) no-repeat center;
position: fixed;
bottom: 0;
top: 0;
left: 0;
right: 0;
margin: auto;
transform-style: preserve-3d;
animation: img_rotate 20s linear infinite;
}
@keyframes img_rotate{
0%{
transform: rotateX(0) rotateY(0);
}
25%{
transform: rotateX(10deg) rotateY(90deg);
}
50%{
transform: rotateX(0) rotateY(180deg);
}
75%{
transform: rotateX(-10deg) rotateY(270deg);
}
100%{
transform: rotateX(0) rotateY(360deg);
}
}
.box .imgBox{
width: 400px;
height: 400px;
position: absolute;
/* 定义变形原点为-600px 等下要让每一个盒子进行Z轴600的位移 */
transform-origin: center center -600px;
}
.box .imgBox img{
display: block;
width: 100%;
height: 100%;
}
.imgBox1{
transform: translateZ(600px);
}
.imgBox2{
transform: translateZ(600px) rotateY(36deg);
}
.imgBox3{
transform: translateZ(600px) rotateY(72deg);
}
.imgBox4{
transform: translateZ(600px) rotateY(108deg);
}
.imgBox5{
transform: translateZ(600px) rotateY(144deg);
}
.imgBox6{
transform: translateZ(600px) rotateY(180deg);
}
.imgBox7{
transform: translateZ(600px) rotateY(216deg);
}
.imgBox8{
transform: translateZ(600px) rotateY(252deg);
}
.imgBox9{
transform: translateZ(600px) rotateY(288deg);
}
.imgBox10{
transform: translateZ(600px) rotateY(324deg);
}
</style>
</head>
<body>
<div class="box">
<div class="imgBox imgBox1">
<img src="壁纸/4.jpg" >
</div>
<div class="imgBox imgBox2">
<img src="壁纸/4.jpg" >
</div>
<div class="imgBox imgBox3">
<img src="壁纸/4.jpg" >
</div>
<div class="imgBox imgBox4">
<img src="壁纸/4.jpg" >
</div>
<div class="imgBox imgBox5">
<img src="壁纸/4.jpg" >
</div>
<div class="imgBox imgBox6">
<img src="壁纸/4.jpg" >
</div>
<div class="imgBox imgBox7">
<img src="壁纸/4.jpg" >
</div>
<div class="imgBox imgBox8">
<img src="壁纸/4.jpg" >
</div>
<div class="imgBox imgBox9">
<img src="壁纸/4.jpg" >
</div>
<div class="imgBox imgBox10">
<img src="壁纸/4.jpg" >
</div>
</div>
</body>
</html>
复制代码
|
|
默认
晚霞
雪山
粉色心情
伦敦
花卉
绿野仙踪
加州
白云
星空
薰衣草
城市
简约黑色
简约米色
龙珠
首页
