使用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 相关文章推荐
纯DOM+CSS3实现简单的小风车动画
Sep 27 HTML / CSS
CSS3 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
css3打造一款漂亮的卡哇伊按钮
Mar 20 HTML / CSS
CSS3实现多重边框的方法总结
May 31 HTML / CSS
HTML+CSS3+JS 实现的下拉菜单
Nov 25 HTML / CSS
深入研究HTML5实现图片压缩上传功能
Mar 25 HTML / CSS
谷歌浏览器小字体处理方案即12px以下字体
Dec 17 HTML / CSS
全面解析HTML5中的标准属性与自定义属性
Feb 18 HTML / CSS
HTML5新特性之type=file文件上传功能
Feb 02 HTML / CSS
记一次高分屏下canvas模糊问题
Feb 17 HTML / CSS
amazeui页面校验功能的实现代码
Aug 24 HTML / CSS
CSS的calc函数用法小结
Jun 25 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
Android ProgressBar进度条和ProgressDialog进度框的展示DEMO
2013/06/19 PHP
Linux下PHP连接Oracle数据库
2014/08/20 PHP
PHP Header用于页面跳转时的几个注意事项
2016/10/21 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
PHP7 安装event扩展的实现方法
2019/10/08 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
用示例说明filter()与find()的用法以及children()与find()的区别分析
2013/04/26 Javascript
JQuery中$.ajax()方法参数详解及应用
2013/12/12 Javascript
浅谈JavaScript function函数种类
2014/12/29 Javascript
javascript 动态创建表格的2种方法总结
2015/03/04 Javascript
JavaScript程序开发之JS代码放置的位置
2016/01/15 Javascript
AngularJS身份验证的方法
2016/02/17 Javascript
JavaScript实现简单的双色球(实例讲解)
2017/07/31 Javascript
jQuery初级教程之网站品牌列表效果
2017/08/02 jQuery
vue中使用cropperjs的方法
2018/03/01 Javascript
jQuery实现的回车触发按钮事件功能示例
2018/03/25 jQuery
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
2018/06/07 Javascript
基于JavaScript实现大文件上传后端代码实例
2020/08/18 Javascript
JS实现无限轮播无倒退效果
2020/09/21 Javascript
[51:05]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第一局
2016/03/06 DOTA
Python中列表(list)操作方法汇总
2014/08/18 Python
快速排序的算法思想及Python版快速排序的实现示例
2016/07/02 Python
PyQt5实现QLineEdit添加clicked信号的方法
2019/06/25 Python
Django用户认证系统 User对象解析
2019/08/02 Python
python 利用已有Ner模型进行数据清洗合并代码
2019/12/24 Python
使用Tkinter制作信息提示框
2020/02/18 Python
Windows下Pycharm远程连接虚拟机中Centos下的Python环境(图文教程详解)
2020/03/19 Python
Python如何安装第三方模块
2020/05/28 Python
英国顶级珠宝品牌之家:John Greed
2018/06/09 全球购物
ShellScript面试题一则-ShellScript编程
2014/06/24 面试题
应届大学生自荐信
2013/12/05 职场文书
门面房租房协议书
2014/08/20 职场文书
立项申请报告范本
2015/05/15 职场文书
病房管理制度范本
2015/08/06 职场文书
《领导干部从政道德启示录》学习心得体会
2016/01/20 职场文书
用PYTHON去计算88键钢琴的琴键频率和音高
2022/04/10 Python