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