3D是three-dimensional的缩写，就是三维图形。在计算机里表现3D图形，就是说在平面里表现三维图形。不像实际天下里，真实的三维空间，有真实的距离空间。计算机里只是看起来很像真实天下，因此在计算机表现的3D图形，就是让人眼看上就像真的一样。人眼有一个特性就是近大远小，就会形成立体感。 计算机屏幕是平面二维的，我们之所以能欣赏到真如实物般的三维图像，是因为表现在计算机屏幕上时色彩灰度的差异而使人眼产生视觉上的错觉，而将二维的计算机屏幕感知为三维图像。基于色彩学的有关知识，三维物体边沿的凸出部门一般显高亮度色，而凹下去的部门由于受光线的遮挡而显暗色。这一熟悉被广泛应用于网页或其他应用中对按钮、3D线条的绘制。比如要绘制的3D文字，即在原始位置表现高亮度颜色，而在左下或右上等位置用低亮度颜色勾勒出其外貌，这样在视觉上便会产生3D文字的结果。详细实现时，可用完全一样的字体在差异的位置分别绘制两个差异颜色的2D文字，只要使两个文字的坐标合适，就完全可以在视觉上产生出差异结果的3D文字。 案例 3D导航栏 结果： [code] <style> * { margin: 0; padding: 0; } ul { margin: 100px ; } ul li { width: 120px; height: 35px; list-style: none; perspective: 500px; float: left; margin: 0 5px; } .box { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: all .3s; } .box:hover{ transform: rotateX(90deg); } .front, .bottom { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; } .front{ background-color: pink; transform: translateZ(17.5px); } .bottom{ background-color: teal; /* transform-origin: center bottom; */ transform:translateY(17.5px) rotateX(-90deg); } </style> <body> <ul> <li> <div class="box"> <div class="front">天</div> <div class="bottom">地</div> </div> </li> <li> <div class="box"> <div class="front">天</div> <div class="bottom">地</div> </div> </li> ... </ul> </body>[/code]
到此这篇关于使用HTML+Css+transform实现3D导航栏的示例代码的文章就先容到这了,更多相干HTML transform实现3D导航栏内容请搜索脚本之家以前的文章或继承浏览下面的相干文章，希望各人以后多多支持脚本之家！ 来源：https://www.jb51.net/html5/769821.html 免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ |
/6 
|手机版|小黑屋|梦想之都-俊月星空
( 粤ICP备18056059号 )|网站地图
GMT+8, 2025-7-2 09:20 , Processed in 0.029212 second(s), 18 queries .
Powered by Mxzdjyxk! X3.5
© 2001-2025 Discuz! Team.
