经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » CSS » 查看文章
使用HTML+Css+transform实现3D导航栏的示例代码
来源:jb51  时间:2021/4/6 9:27:52  对本文有异议

3D是three-dimensional的缩写,就是三维图形。在计算机里显示3D图形,就是说在平面里显示三维图形。不像现实世界里,真实的三维空间,有真实的距离空间。计算机里只是看起来很像真实世界,因此在计算机显示的3D图形,就是让人眼看上就像真的一样。人眼有一个特性就是近大远小,就会形成立体感。

计算机屏幕是平面二维的,我们之所以能欣赏到真如实物般的三维图像,是因为显示在计算机屏幕上时色彩灰度的不同而使人眼产生视觉上的错觉,而将二维的计算机屏幕感知为三维图像。基于色彩学的有关知识,三维物体边缘的凸出部分一般显高亮度色,而凹下去的部分由于受光线的遮挡而显暗色。这一认识被广泛应用于网页或其他应用中对按钮、3D线条的绘制。比如要绘制的3D文字,即在原始位置显示高亮度颜色,而在左下或右上等位置用低亮度颜色勾勒出其轮廓,这样在视觉上便会产生3D文字的效果。具体实现时,可用完全一样的字体在不同的位置分别绘制两个不同颜色的2D文字,只要使两个文字的坐标合适,就完全可以在视觉上产生出不同效果的3D文字。

案例

3D导航栏

效果:

  1. <style>
  2. * {
  3. margin: 0;
  4. padding: 0;
  5. }
  6. ul {
  7. margin: 100px ;
  8. }
  9. ul li {
  10. width: 120px;
  11. height: 35px;
  12. list-style: none;
  13. perspective: 500px;
  14. float: left;
  15. margin: 0 5px;
  16. }
  17. .box {
  18. width: 100%;
  19. height: 100%;
  20. position: relative;
  21. transform-style: preserve-3d;
  22. transition: all .3s;
  23. }
  24. .box:hover{
  25. transform: rotateX(90deg);
  26. }
  27. .front,
  28. .bottom {
  29. width: 100%;
  30. height: 100%;
  31. position: absolute;
  32. top: 0;
  33. left: 0;
  34. display: flex;
  35. justify-content: center;
  36. align-items: center;
  37. }
  38. .front{
  39. background-color: pink;
  40. transform: translateZ(17.5px);
  41. }
  42. .bottom{
  43. background-color: teal;
  44. /* transform-origin: center bottom; */
  45. transform:translateY(17.5px) rotateX(-90deg);
  46. }
  47. </style>
  48. <body>
  49. <ul>
  50. <li>
  51. <div class="box">
  52. <div class="front"></div>
  53. <div class="bottom"></div>
  54. </div>
  55. </li>
  56. <li>
  57. <div class="box">
  58. <div class="front"></div>
  59. <div class="bottom"></div>
  60. </div>
  61. </li>
  62. ...
  63. </ul>
  64. </body>

到此这篇关于使用HTML+Css+transform实现3D导航栏的示例代码的文章就介绍到这了,更多相关HTML transform实现3D导航栏内容请搜索w3xue以前的文章或继续浏览下面的相关文章,希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号