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

2024-07-11 08:32:45

字体：大中小

来源：转载

供稿：网友

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三维动画</title> <style type="text/css">
* { padding : 0px;
margin: 0px; }
body { background: url(images/758.jpg) no-repeat top center;
} .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: slide 12s linear infinite; }
.scene ul li {
width: 230px; height: 230px;
list-style: none; border: 5px solid rgba(255, 255, 255, 0.5);
position: absolute; }
@keyframes slide{
from{ transform: rotateY(0deg);
}
to{ transform: rotateY(360deg);
} }
.s1 { float: left;
} .s1 ul li:nth-child(1) {
transform: rotateY(0deg) translateZ(118px); }
.s1 ul li:nth-child(2) { transform: rotateY(90deg) translateZ(118px);
} .s1 ul li:nth-child(3) {
transform: rotateY(180deg) translateZ(118px); }
.s1 ul li:nth-child(4) { transform: rotateY(-90deg) translateZ(118px);
} .s2 {
float: right; }
.s2 ul li:nth-child(1) { transform: rotateY(0deg) translateZ(200px);
} .s2 ul li:nth-child(2) {
transform: rotateY(90deg) translateZ(200px); }
.s2 ul li:nth-child(3) { transform: rotateY(180deg) translateZ(200px);
} .s2 ul li:nth-child(4) {
transform: rotateY(-90deg) translateZ(200px); }
</style> </head>
<body> <div class='product'>
<div class='scene s1'> <ul>
<li><img src="images/1.jpg"/></li> <li><img src="images/2.jpg"/></li>
<li><img src="images/3.jpg"/></li> <li><img src="images/4.jpg"/></li>
</ul> </div>
<div class='scene s2'> <ul>
<li><img src="images/1.jpg"/></li> <li><img src="images/2.jpg"/></li>
<li><img src="images/3.jpg"/></li> <li><img src="images/4.jpg"/></li>
</ul> </div>
</div> </body>
</html>