CSS3制作酷炫的三维相册效果

发布时间：2023-01-03 08:41:52 来源：网络

.

太阳渐渐往下落，它的脸涨得越来越红，红的像个大火球，把身边的云染成五颜六色。慢慢地它走到西山背后，把美丽的霞光留在遥远的天边。我们都看得目瞪口呆。我的心里在想：晚霞真美！

特炫的三维相册分享出来，希望大家喜欢！

XML/HTML Code复制内容到剪贴板

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>三维动画</title>
<styletype="text/css">
*{
padding:0px;
margin:0px;
}
body{
background:url(images/758.jpg)no-repeattopcenter;
}
.product{
height:400px;
position:fixed;
top:20%;
right:20%;
/*视距*/
perspective:500px;
}
.scene{
height:250px;
width:250px;
transform-style:preserve-3d;
transform-origin:50%;
margin:100px;
/*定义一个名为slide的动画*/
animation:slide12slinearinfinite;
}
.sceneulli{
width:230px;
height:230px;
list-style:none;
border:5pxsolidrgba(255,255,255,0.5);
position:absolute;
}
@keyframesslide{
from{
transform:rotateY(0deg);
}
to{
transform:rotateY(360deg);
}
}
.s1{
float:left;
}
.s1ulli:nth-child(1){
transform:rotateY(0deg)translateZ(118px);
}
.s1ulli:nth-child(2){
transform:rotateY(90deg)translateZ(118px);
}
.s1ulli:nth-child(3){
transform:rotateY(180deg)translateZ(118px);
}
.s1ulli:nth-child(4){
transform:rotateY(-90deg)translateZ(118px);
}
.s2{
float:right;
}
.s2ulli:nth-child(1){
transform:rotateY(0deg)translateZ(200px);
}
.s2ulli:nth-child(2){
transform:rotateY(90deg)translateZ(200px);
}
.s2ulli:nth-child(3){
transform:rotateY(180deg)translateZ(200px);
}
.s2ulli:nth-child(4){
transform:rotateY(-90deg)translateZ(200px);
}
</style>
</head>
<body>
<divclass='product'>
<divclass='scenes1'>
<ul>
<li><imgsrc="images/1.jpg"/></li>
<li><imgsrc="images/2.jpg"/></li>
<li><imgsrc="images/3.jpg"/></li>
<li><imgsrc="images/4.jpg"/></li>
</ul>
</div>
<divclass='scenes2'>
<ul>
<li><imgsrc="images/1.jpg"/></li>
<li><imgsrc="images/2.jpg"/></li>
<li><imgsrc="images/3.jpg"/></li>
<li><imgsrc="images/4.jpg"/></li>
</ul>
</div>
</div>
</body>
</html>