需要注意的点:
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>
注:图是让我进行马赛克后的图片,主要目的是方便大家看见图片的轮廓
【本文由：防ddos攻击 gfcdn.html提供，感恩】心中有愿望一定要去闯，努力实现最初的梦想，
