CSS3实现3D效果的图片墙_html/css_WEB-ITnose
先来看一下效果：http://1.huizit1.applinzi.com/CSS/transform_3D/img_3D.html
布局结构：
<div class="container"> <img src="/static/imghw/default1.png" data-src="../Img/1.jpg" class="lazy" alt="CSS3实现3D效果的图片墙_html/css_WEB-ITnose" > <img src="/static/imghw/default1.png" data-src="../Img/2.jpg" class="lazy" alt="CSS3实现3D效果的图片墙_html/css_WEB-ITnose" > <img src="/static/imghw/default1.png" data-src="../Img/3.jpg" class="lazy" alt="CSS3实现3D效果的图片墙_html/css_WEB-ITnose" > <img src="/static/imghw/default1.png" data-src="../Img/4.jpg" class="lazy" alt="CSS3实现3D效果的图片墙_html/css_WEB-ITnose" > <img src="/static/imghw/default1.png" data-src="../Img/5.jpg" class="lazy" alt="CSS3实现3D效果的图片墙_html/css_WEB-ITnose" > <img src="/static/imghw/default1.png" data-src="../Img/6.jpg" class="lazy" alt="CSS3实现3D效果的图片墙_html/css_WEB-ITnose" > <img src="/static/imghw/default1.png" data-src="../Img/7.jpg" class="lazy" alt="CSS3实现3D效果的图片墙_html/css_WEB-ITnose" > <img src="/static/imghw/default1.png" data-src="../Img/8.jpg" class="lazy" alt="CSS3实现3D效果的图片墙_html/css_WEB-ITnose" > <img src="/static/imghw/default1.png" data-src="../Img/9.jpg" class="lazy" alt="CSS3实现3D效果的图片墙_html/css_WEB-ITnose" > <img src="/static/imghw/default1.png" data-src="../Img/10.jpg" class="lazy" alt="CSS3实现3D效果的图片墙_html/css_WEB-ITnose" > </div>
CSS3中新增了translate-style和perspective属性，要让图片有3D的效果就要添加这两个属性，具体的解释这里不再赘述，可以看这篇文章来理解：http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/
给container添加translate-style为preserve-3d，添加perspective: 2000px;
这里一共10张图片，为了让10张图片围成一个圆，需要添加position属性为absolute，设置宽度相同，居中，这时所有图片都重合在了一起。每张图片绕Y轴旋转36*i（i:0->9）度（rotateY），然后每张图片在Z轴方向移动相同的距离（translateZ），这个距离能保证图片不重合在一起就行。这时图片就围成了一个环状，并且是有3D效果的。然后给container添加动画属性让其绕Y轴不停旋转（rotateY），这时动画就出现了。
注意：给图片添加的属性transform: rotateY(0deg) translateZ(350px);rotateY和translateZ的位置不能交换，因为先旋转后移动和先移动后旋转的效果是不一样的。
这里我给container添加了背景颜色来参考图片的相对位置和旋转轴。
如果要用鼠标点击来切换图片的话，只需要每次点击之后container的旋转角度加36度就可以。
贴上代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>img_3D</title> 6 </head> 7 <style type="text/css"> 8 @keyframes an1{ 9 0%{10 transform: rotateY(0deg) ;11 }12 50%{13 transform: rotateY(180deg) ;14 }15 100%{16 transform: rotateY(360deg) ;17 }18 }19 .container{20 width: 900px;21 height: 400px;22 background: rgba(255,0,0,0.5);23 /*opacity: 0.3;*/24 25 margin: 200px auto;26 perspective: 2000px;27 transform-style: preserve-3d;28 animation: an1 10s linear 0s infinite;29 }30 .container img{31 width: 200px;32 height: auto;33 margin: auto;34 top: 0;35 bottom: 0;36 left: 0;37 right: 0;38 position: absolute;39 }40 .container img:nth-child(1){41 transform: rotateY(0deg) translateZ(350px);42 }43 .container img:nth-child(2){44 transform: rotateY(36deg) translateZ(350px);45 }46 .container img:nth-child(3){47 transform: rotateY(72deg) translateZ(350px);48 }49 .container img:nth-child(4){50 transform: rotateY(108deg) translateZ(350px);51 }52 .container img:nth-child(5){53 transform: rotateY(144deg) translateZ(350px);54 }55 .container img:nth-child(6){56 transform: rotateY(180deg) translateZ(350px);57 }58 .container img:nth-child(7){59 transform: rotateY(216deg) translateZ(350px);60 }61 .container img:nth-child(8){62 transform: rotateY(252deg) translateZ(350px);63 }64 .container img:nth-child(9){65 transform: rotateY(288deg) translateZ(350px);66 }67 .container img:nth-child(10){68 transform: rotateY(324deg) translateZ(350px);69 }70 </style>71 <body>72 <div class="container">73 <img src="/static/imghw/default1.png" data-src="../Img/1.jpg" class="lazy" alt="CSS3实现3D效果的图片墙_html/css_WEB-ITnose" >74 <img src="/static/imghw/default1.png" data-src="../Img/2.jpg" class="lazy" alt="CSS3实现3D效果的图片墙_html/css_WEB-ITnose" >75 <img src="/static/imghw/default1.png" data-src="../Img/3.jpg" class="lazy" alt="CSS3实现3D效果的图片墙_html/css_WEB-ITnose" >76 <img src="/static/imghw/default1.png" data-src="../Img/4.jpg" class="lazy" alt="CSS3实现3D效果的图片墙_html/css_WEB-ITnose" >77 <img src="/static/imghw/default1.png" data-src="../Img/5.jpg" class="lazy" alt="CSS3实现3D效果的图片墙_html/css_WEB-ITnose" >78 <img src="/static/imghw/default1.png" data-src="../Img/6.jpg" class="lazy" alt="CSS3实现3D效果的图片墙_html/css_WEB-ITnose" >79 <img src="/static/imghw/default1.png" data-src="../Img/7.jpg" class="lazy" alt="CSS3实现3D效果的图片墙_html/css_WEB-ITnose" >80 <img src="/static/imghw/default1.png" data-src="../Img/8.jpg" class="lazy" alt="CSS3实现3D效果的图片墙_html/css_WEB-ITnose" >81 <img src="/static/imghw/default1.png" data-src="../Img/9.jpg" class="lazy" alt="CSS3实现3D效果的图片墙_html/css_WEB-ITnose" >82 <img src="/static/imghw/default1.png" data-src="../Img/10.jpg" class="lazy" alt="CSS3实现3D效果的图片墙_html/css_WEB-ITnose" >83 </div>84 </body>85 </html>
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
＆gt; gt;的目的是什么 元素？
Mar 21, 2025 pm 12:34 PM
本文讨论了HTML＆lt; Progress＆gt;元素，其目的，样式和与＆lt; meter＆gt;元素。主要重点是使用＆lt; progress＆gt;为了完成任务和LT;仪表＆gt;对于stati
＆lt; datalist＆gt;的目的是什么。 元素？
Mar 21, 2025 pm 12:33 PM
本文讨论了html＆lt; datalist＆gt;元素，通过提供自动完整建议，改善用户体验并减少错误来增强表格。Character计数：159
＆lt; meter＆gt;的目的是什么。 元素？
Mar 21, 2025 pm 12:35 PM
本文讨论了HTML＆lt; meter＆gt;元素，用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了＆lt; meter＆gt;从＆lt; progress＆gt;和前
视口元标签是什么？为什么对响应式设计很重要？
Mar 20, 2025 pm 05:56 PM
本文讨论了视口元标签，这对于移动设备上的响应式Web设计至关重要。它解释了如何正确使用确保最佳的内容缩放和用户交互，而滥用可能会导致设计和可访问性问题。
＆lt; iframe＆gt;的目的是什么。 标签？使用时的安全考虑是什么？
Mar 20, 2025 pm 06:05 PM
本文讨论了＆lt; iframe＆gt;将外部内容嵌入网页，其常见用途，安全风险以及诸如对象标签和API等替代方案的目的。
HTML容易为初学者学习吗？
Apr 07, 2025 am 12:11 AM
HTML适合初学者学习，因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓，易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高，可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。
HTML，CSS和JavaScript的角色：核心职责
Apr 08, 2025 pm 07:05 PM
HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。
HTML中起始标签的示例是什么？
Apr 06, 2025 am 12:04 AM
AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。
