需要注意的点: 1.首先是image的整理,以个人实际开发经验来看,方方正正的照片做出来的效果比较好 2.其次是在html中的盒子的大小和尺寸的构建,以实际情况看自己需要放几张照片来调整盒
需要注意的点:
- 1.首先是image的整理,以个人实际开发经验来看,方方正正的照片做出来的效果比较好
- 2.其次是在html中的盒子的大小和尺寸的构建,以实际情况看自己需要放几张照片来调整盒子的大小(一个大的盒子里放几个小的盒子)
- 3.将每个盒子的内外边距调整合适
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>相信光的奥特王小懒的3D旋转相册</title>
<style type="text/css">
*{padding: 0;
margin: 0;}
body,html{height:100%;}
body{background-image: url("images/beijing.jpg");background-size: 100% 100%;}
#box{width: 200px;
height: 400px;
position: fixed;
left: 0;
right: 0;
top:0;
bottom: 0;
margin: auto;
transform-style: preserve-3d;
transform: rotateX(0deg) rotateY(0deg);
animation: go 45s linear infinite;
}
#box img{width: 250px;
height: 250px;
position: absolute;
left: 0;
top: 0;
}
#box img:nth-child(1){
transform: rotateY(0deg) translateZ(500px);}
#box img:nth-child(2){
transform: rotateY(36deg) translateZ(500px);}
#box img:nth-child(3){
transform: rotateY(72deg) translateZ(500px);}
#box img:nth-child(4){
transform: rotateY(108deg) translateZ(500px);}
#box img:nth-child(5){
transform: rotateY(144deg) translateZ(500px);}
#box img:nth-child(6){
transform: rotateY(180deg) translateZ(500px);}
#box img:nth-child(7){
transform: rotateY(216deg) translateZ(500px);}
#box img:nth-child(8){
transform: rotateY(252deg) translateZ(500px);}
#box img:nth-child(9){
transform: rotateY(288deg) translateZ(500px);}
#box img:nth-child(10){
transform: rotateY(324deg) translateZ(500px);}
@keyframes go {
0%{transform: rotateX(0deg) rotateY(0deg);}
25%{transform: rotateX(20deg) rotateY(180deg);}
50%{transform: rotateX(0deg) rotateY(360deg);}
75%{transform: rotateX(-20deg) rotateY(540deg);}
100%{transform: rotateX(0deg) rotateY(720deg);}
}
</style>
</head>
<body>
<div id="box">
<img src="images/1.jpg">
<img src="images/2.jpg">
<img src="images/3.jpg">
<img src="images/4.jpg">
<img src="images/5.jpg">
<img src="images/6.jpg">
<img src="images/7.jpg">
<img src="images/8.jpg">
<img src="images/9.jpg">
<img src="images/10.jpg">
</div>
</body>
</html>
注:图是让我进行马赛克后的图片,主要目的是方便大家看见图片的轮廓
