使用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 相关文章推荐
表单button的outline在firefox浏览器下的问题
Dec 24 HTML / CSS
CSS3 制作绽放的莲花采用效果叠加实现
Jan 31 HTML / CSS
用CSS3来实现社交分享按钮
Nov 11 HTML / CSS
一款纯css3制作的2015年元旦雪人动画特效教程
Dec 29 HTML / CSS
使用CSS3创建动态菜单效果
Jul 10 HTML / CSS
css3实现圆锥渐变conic-gradient效果
Feb 12 HTML / CSS
Html5与App的通讯方式详解
Oct 24 HTML / CSS
基于html5 canvas做批改作业的小插件
May 20 HTML / CSS
HTML5实现移动端点击翻牌功能
Oct 23 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
Dec 01 HTML / CSS
html5使用window.postMessage进行跨域实现数据交互的一次实战
Feb 24 HTML / CSS
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
Dec 24 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
调频问题解答
2021/03/01 无线电
PHP中extract()函数的妙用分析
2012/07/11 PHP
PHP中使用FFMPEG获取视频缩略图和视频总时长实例
2014/05/04 PHP
PHP查找与搜索数组元素方法总结
2015/06/12 PHP
php微信公众平台开发之获取用户基本信息
2015/08/17 PHP
PHP简单获取及判断提交来源的方法
2016/04/22 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
日期 时间js控件
2009/05/07 Javascript
JavaScript打印网页指定区域的例子
2014/05/03 Javascript
利用javascript实现全部删或清空所选的操作
2014/05/27 Javascript
js选择并转移导航菜单示例代码
2014/08/19 Javascript
jQuery中change事件用法实例
2014/12/26 Javascript
JS判断客服QQ号在线还是离线状态的方法
2015/01/13 Javascript
基于JavaScript实现弹出框效果
2016/02/19 Javascript
详解js中的apply与call的用法
2016/07/30 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
2017/03/29 Javascript
React中常见的动画实现的几种方式
2018/01/10 Javascript
Python EOL while scanning string literal问题解决方法
2020/09/18 Python
python实现的守护进程(Daemon)用法实例
2015/06/02 Python
Python BS4库的安装与使用详解
2018/08/08 Python
ML神器:sklearn的快速使用及入门
2019/07/11 Python
python多线程分块读取文件
2019/08/29 Python
使用SQLAlchemy操作数据库表过程解析
2020/06/10 Python
Python函数的迭代器与生成器的示例代码
2020/06/18 Python
利用Vscode进行Python开发环境配置的步骤
2020/06/22 Python
python基于win32api实现键盘输入
2020/12/09 Python
python xlsxwriter模块的使用
2020/12/24 Python
丹麦优惠购物网站:PLUSSHOP
2019/03/24 全球购物
计算机应用职专应届生求职信
2013/11/12 职场文书
作弊检讨书1000字
2014/02/01 职场文书
学生无故旷课检讨书
2014/09/20 职场文书
离婚协议书范文
2015/01/26 职场文书
2015年高中班级工作总结
2015/07/21 职场文书
2015高中教师个人工作总结
2015/07/21 职场文书
校运会宣传稿大全
2015/07/23 职场文书
浅谈Python3中datetime不同时区转换介绍与踩坑
2021/08/02 Python