特炫的三维相册分享出来，希望大家喜欢！
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>
下面是截图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持查字典教程网。
【CSS3制作酷炫的三维相册效果】相关文章：