旋转立体相册制作html,用CSS3制作3D动态旋转相册

最近做一个网站，想弄一个炫酷的效果，所以想到了用CSS3做一个图片3D旋转的效果。【实际就是做一个3D动态旋转相册，自己发挥哦】

下面直接上代码了。

-------------------start------------------------------

css3制作的3d立体旋转动画效果-jq22.com

ul{

list-style: none;

width: 200px;

height: 150px;

margin: 70px auto;

/* 父盒子开启3d */

transform-style: preserve-3d;

/* 引入动画效果 */

animation: rotate 3s linear infinite;

}

@keyframes rotate {

/* 旋转沿x轴旋转-10度,再绕y轴旋转 */

0%{

transform: rotateX(-10deg) rotateY(0deg)

}

100%{

transform: rotateX(-10deg)  rotateY(360deg)

}

}

ul li img{

/* 图片和父盒子一样大 */

width: 100%;

height: 100%

}

ul li{

/* 绝对定位,先让li标签重叠 */

position: absolute;

}

ul li:nth-child(1){

/* 先绕y轴旋转60度,再沿z轴平移200px,就会形成立体感 */

transform: rotateY(60deg) translateZ(200px)

}

ul li:nth-child(2){

transform: rotateY(120deg) translateZ(200px)

}

ul li:nth-child(3){

transform: rotateY(180deg) translateZ(200px)

}

ul li:nth-child(4){

transform: rotateY(240deg) translateZ(200px)

}

ul li:nth-child(5){

transform: rotateY(300deg) translateZ(200px)

}

ul li:nth-child(6){

transform: rotateY(360deg) translateZ(200px)

}

• 
• 
• 
• 
• 
• 

-------------------end------------------------------

现在给大家看看效果吧：

喜欢的盆友、遇到问题的盆友，请到公众号：【软件编程网站开发】