特炫的三维相册分享出来，希望大家喜欢！
XM L/HT ML Code 复制内容到剪贴板
<!DOCTY PE &nbs p; html P ub LIC "-//W3C//DTD XHTML 1.0 Trans IT ional//EN" "http://HdhCmsTestw3. org /TR/xhtml1/DTD/xhtml1 -t ransitional.dtd" > < html xmlns = "http://HdhCmsTestw3.org/1999/xhtml" > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" /> < title > 三维动画 </ title > < style type = "text/css" > * { padding : 0px; ;m arg in: 0px; } body { background: url(images/758. jpg ) no-repeat top center ; } . PR oduct { h ei ght: 400px; position: fixed; top: 20%; right: 20%; /*视距*/ perspective : 500px; } .scene { height: 250px; width: 250px; transform -s tyle: preserve-3d; transform-ori gin : 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; } @keyfr am es slide{ From { transform: rotateY(0 deg ); } to{ transform: rotateY( 360 deg); } } .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 >
下面是截图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
总结
以上是 为你收集整理的 CSS3制作酷炫的三维相册效果 全部内容，希望文章能够帮你解决 CSS3制作酷炫的三维相册效果 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。