特炫的三维相册分享出来，希望大家喜欢！
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> <!-- scene类是为了修饰两个div的相同点 --> <!-- s1和s2是为了显示两个div的不同，一个左浮动，一个右浮动 --> <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>下面是截图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
