使用HTML+Css+transform实现3D导航栏的示例代码_html5教程技巧

来源:脚本之家  责任编辑:小易  

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

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

案例

3D导航栏

效果:

<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>

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


  • 本文相关:
  • 纯css实现菜单、导航栏的3d翻转动画效果
  • 如何实现HTML5中导航栏3d旋转?
  • HTML5如何在网页中实现3D效果
  • 如何用html5按照图的样式做出一个网页导航条,实现...
  • 用html5和其他插件如何实现3d模型在网页中的旋转?...
  • html5怎么实现3d效果
  • html5如何让图片3d旋转
  • 怎样学习Web开发,纯html5+css3下拉导航菜单实现代码
  • 基于html5+javascript在网页实现3d效果的东西有什...
  • 用html5和css3做一个网页导航,有高手吗?我需要帮...
  • js+HTML5如何在网页中实现3D效果
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作html5htmltransform3d导航栏纯css实现菜单、导航栏的3d翻转动画效果html/xhtmlhtml5cssxml/xsltdreamweaver教程frontpage教程心得技巧css 如何让背景图片拉伸填充避免重复显示html5 input placeholder 颜色修改示例基于第一个phonegap(cordova)的应用详解 html5配合css3实现带提示文字的输入框(摆脱js)html5定位获取当前位置并在百度地图上显示将html5 canvas的内容保存为图片借助todataurl实现html5中如何显示视频呢 html5视频播放demo让ie支持html5的方法微信浏览器取消缓存的方法html5的存储方式sessionstorage和localstorage详解使用html+css+transform实现3d导航栏的示例代码html5页面播放m4a音频文件利用html+css实现菜单栏缓慢下拉效果的示例代码使用canvas实现雪花飘动效果的示例代码前端html5如何实现分享截图的示例代码html5实现可拖拽移动的悬浮图标的示例代码html5数字输入仅接受整数的实现代码html5移动端div固定到底部实现底部导航条的几种方式html5拖拽文件上传的示例代码html5使用window.postmessage进行跨域实现数据交互的
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved