css3运动实现旋转相册

利用css3属性transform，preserve-3d，animation，@keyframes等属性来实现一个旋转相册的美观特效（ps：当作小礼物送给女朋友也是不错滴，实现虽简单，效果很不错）

工具/原料

编辑工具根据个人喜好，我比较推荐点的是sublime text

方法/步骤

首先需要做的就是通过 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); }

其次就是利用@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); } }

最后利用animation使其进行运动起来，这样一款纯css3的旋转相册就制作完成了，是不是很简单。 .box{ width: 130px; height: 200px; margin: 300px auto; position: relative; transform-style: preserve-3d; animation: dd 12s linear 0s infinite; }

完整的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); } }

html如下。