使用HTML+Css+transform实现3D导航栏的示例代码


Posted in HTML / CSS onMarch 31, 2021

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+Css+transform实现3D导航栏的示例代码的文章就介绍到这了,更多相关HTML transform实现3D导航栏内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
css3实现背景模糊的三种方式
Mar 09 HTML / CSS
CSS3 开发工具收集
Apr 17 HTML / CSS
CSS3下的渐变文字效果实现示例
Mar 02 HTML / CSS
使用css实现android系统的loading加载动画
Jul 25 HTML / CSS
详解使用HTML5的classList属性操作CSS类
Oct 13 HTML / CSS
HTML5 Geolocation API的正确使用方法
Dec 04 HTML / CSS
使用html5+css3来实现slider切换效果告别javascript+css
Jan 08 HTML / CSS
HTML5 video 视频标签使用介绍
Feb 03 HTML / CSS
Html5实现二维码扫描并解析
Jan 20 HTML / CSS
HTML5语义化元素你真的用对了吗
Aug 22 HTML / CSS
CSS3 制作的悬停缩放特效
Apr 13 HTML / CSS
新的CSS 伪类函数 :is() 和 :where()示例详解
Aug 05 HTML / CSS
z-index不起作用
Mar 31 #HTML / CSS
元素水平垂直居中的方式
Mar 31 #HTML / CSS
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
简单实现一个手持弹幕功能+文字抖动特效
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
Mar 31 #HTML / CSS
Web前端:CSS最强总结 附详细代码
血轮眼轮回眼特效 html+css
You might like
php5 mysql分页实例代码
2008/04/10 PHP
那些年一起学习的PHP(一)
2012/03/21 PHP
解析PHP 使用curl提交json格式数据
2013/06/29 PHP
ThinkPHP 模板substr的截取字符串函数详解
2017/01/09 PHP
php+layui数据表格实现数据分页渲染代码
2019/10/26 PHP
Dojo之路:如何利用Dojo实现Drag and Drop效果
2007/04/10 Javascript
javascript设计模式 封装和信息隐藏(上)
2012/07/24 Javascript
js中typeof的用法汇总
2013/12/12 Javascript
4种JavaScript实现简单tab选项卡切换的方法
2016/01/06 Javascript
nodejs基于WS模块实现WebSocket聊天功能的方法
2018/01/12 NodeJs
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
2018/07/31 Javascript
js canvas实现写字动画效果
2018/11/30 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
2019/05/14 Javascript
webpack的tree shaking的实现方法
2019/09/18 Javascript
原生JavaScript实现拖动校验功能
2020/09/29 Javascript
Vue实现简单的留言板
2020/10/23 Javascript
用Python给文本创立向量空间模型的教程
2015/04/23 Python
详解Python爬虫的基本写法
2016/01/08 Python
python utc datetime转换为时间戳的方法
2019/01/15 Python
python接口自动化(十七)--Json 数据处理---一次爬坑记(详解)
2019/04/18 Python
Python selenium模拟手动操作实现无人值守刷积分功能
2020/05/13 Python
解决keras使用cov1D函数的输入问题
2020/06/29 Python
flask项目集成swagger的方法
2020/12/09 Python
基于Python实现天天酷跑功能
2021/01/06 Python
Python爬取你好李焕英豆瓣短评生成词云的示例代码
2021/02/24 Python
使用CSS禁止textarea调整大小功能的方法
2015/03/13 HTML / CSS
生产经理的自我评价分享
2013/11/07 职场文书
英语教研活动总结
2014/07/02 职场文书
详细的本科生职业生涯规划范文
2014/09/16 职场文书
报表员工作失误检讨书范文
2014/09/19 职场文书
房产公证委托书范本
2014/09/20 职场文书
工作失误检讨书(3篇)
2014/10/11 职场文书
申报优秀教师材料
2014/12/16 职场文书
先进个人推荐材料
2014/12/29 职场文书
档案工作个人总结
2015/03/03 职场文书
旅游安全责任协议书
2016/03/22 职场文书