计算机3d相册代码,CSS3实现3D旋转相册(示例代码)

静态效果图：

代码如下：

Document

*{margin: 0;padding: 0;}

ul{

width: 200px;

height: 200px;

list-style: none;

margin: 100px auto;

position: relative;

transform-style: preserve-3d;

animation:xuanzhuan 6s linear infinite;

}

ul li{

width: 200px;

line-height: 200px;

text-align: center;

position: absolute;

left: 0;

top: 0;

}

ul li:nth-child(1){

background-color: red;

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

}

ul li:nth-child(2){

background-color: orange;

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

}

ul li:nth-child(3){

background-color: yellow;

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

}

ul li:nth-child(4){

background-color: green;

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

}

ul li:nth-child(5){

background-color: tomato;

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

}

ul li:nth-child(6){

background-color: blue;

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

}

ul:hover{

animation-play-state:paused;

}

@keyframes xuanzhuan{

from{

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

}

to{transform:rotateX(-10deg) rotateY(360deg);

}

• 1
• 2
• 3
• 4
• 5
• 6