CSS3制作酷炫的三维相册效果
更新时间:2023-04-06 22:59:27 阅读： 评论：0
特炫的三维相册分享出来，希望大家喜欢！
xml/html code
复制内容到剪贴板
<!doctypehtmlpublic“-//w3c//dtdxhtml1.0transitional//en”“/d/file/titlepic/xhtml1-transitional.dtd& 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:prerve-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&g仙山谷漂流t;&感谢师恩的诗句lt;div信息安全管理制度class=‘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>下面是截图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持www.887551.com。
本文word下载地址：CSS3制作酷炫的三维相册效果.doc
本文 PDF 下载地址：CSS3制作酷炫的三维相册效果.pdf
