1、首先需要做的就是通过transform属性将所以的图片平均转动一个角度，使其形成一种立体环绕式的感觉。 .box img:nth-child(1){ transform: rotateY(0) translateZ(400px); } .box img:nth-child(2){ transform: rotateY(30deg) translateZ(400px); } .box img:nth-child(3){ transform: rotateY(60deg) translateZ(400px); } .box img:nth-child(4){ transform: rotateY(90deg) translateZ(400px); } .box img:nth-child(5){ transform: rotateY(120deg) translateZ(400px); } .box img:nth-child(6){ transform: rotateY(150deg) translateZ(400px); } .box img:nth-child(7){ transform: rotateY(180deg) translateZ(400px); } .box img:nth-child(8){ transform: rotateY(210deg) translateZ(400px); } .box img:nth-child(9){ transform: rotateY(240deg) translateZ(400px); } .box img:nth-child(10){ transform: rotateY(270deg) translateZ(400px); } .box img:nth-child(11){ transform: rotateY(300deg) translateZ(400px); } .box img:nth-child(12){ transform: rotateY(330deg) translateZ(400px); }
2、其次就是利用@keyframes来使元素从0%到100%的变化。@keyframes dd{ 0%{ transform: rotateY(0) rotateX(-5deg); } 25%{ transform: rotateY(90deg) rotateX(-15deg); } 50%{ transform: rotateY(180deg) rotateX(-5deg); } 75%{ transform: rotateY(270deg) rotateX(-15deg); } 100%{ transform: rotateY(360deg) rotateX(-5deg); } }
3、最后利用animation使其进行运动起来，这样一款纯css3的旋转相册就制作完成了，是不是很简单。.box{ width: 130px; height: 200px; margin: 300px auto; position: relative; transform-style: preserve-3d; animation: dd 12s linear 0s infinite; }
4、完整的css代码如下。body{ perspective: 1000px; background: #000; } .box{ width: 130px; height: 200px; margin: 300px auto; position: relative; transform-style: preserve-3d; animation: dd 12s linear 0s infinite; } img{ width: 100%; height: 100%; position: absolute; left: 0;top: 0; border: 4px solid #c0c0c0; box-shadow: 5px 0 10px #c0c0c0,-5px 0 10px #c0c0c0,0 5px 10px #c0c0c0,0 -5px 10px #c0c0c0; } .box img:nth-child(1){ transform: rotateY(0) translateZ(400px); } .box img:nth-child(2){ transform: rotateY(30deg) translateZ(400px); } .box img:nth-child(3){ transform: rotateY(60deg) translateZ(400px); } .box img:nth-child(4){ transform: rotateY(90deg) translateZ(400px); } .box img:nth-child(5){ transform: rotateY(120deg) translateZ(400px); } .box img:nth-child(6){ transform: rotateY(150deg) translateZ(400px); } .box img:nth-child(7){ transform: rotateY(180deg) translateZ(400px); } .box img:nth-child(8){ transform: rotateY(210deg) translateZ(400px); } .box img:nth-child(9){ transform: rotateY(240deg) translateZ(400px); } .box img:nth-child(10){ transform: rotateY(270deg) translateZ(400px); } .box img:nth-child(11){ transform: rotateY(300deg) translateZ(400px); } .box img:nth-child(12){ transform: rotateY(330deg) translateZ(400px); } @keyframes dd{ 0%{ transform: rotateY(0) rotateX(-5deg); } 25%{ transform: rotateY(90deg) rotateX(-15deg); } 50%{ transform: rotateY(180deg) rotateX(-5deg); } 75%{ transform: rotateY(270deg) rotateX(-15deg); } 100%{ transform: rotateY(360deg) rotateX(-5deg); } }
5、html如下。<body> <div class="box"> <img src="images/hm.jpg"> <img src="images/hm2.jpg"> <img src="images/hm3.jpg"> <img src="images/hm4.jpg"> <img src="images/hm5.jpg"> <img src="images/hm6.jpg"> <img src="images/hm7.jpg"> <img src="images/hm8.jpg"> <img src="images/hm9.jpg"> <img src="images/hm10.jpg"> <img src="images/hm11.jpg"> <img src="images/hm12.jpg"> </div></body>