使用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 相关文章推荐
Web前端绘制0.5像素的几种方法
Aug 11 HTML / CSS
CSS3 简写animation
May 10 HTML / CSS
CSS3旋转——彩色扇子兼容firefox浏览器
Jun 04 HTML / CSS
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
Mar 31 HTML / CSS
CSS3 中的@keyframes介绍
Sep 02 HTML / CSS
6种非常炫酷的CSS3按钮边框动画特效
Mar 16 HTML / CSS
CSS3中animation实现流光按钮效果
Dec 21 HTML / CSS
HTML5 canvas 基本语法
Aug 26 HTML / CSS
HTML5本地存储之Database Storage应用介绍
Jan 06 HTML / CSS
HTML5在a标签内放置块级元素示例代码
Aug 23 HTML / CSS
HTML5为输入框添加语音输入功能的实现方法
Feb 06 HTML / CSS
CSS实现漂亮的时钟动画效果的实例代码
Mar 30 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
php基础知识:类与对象(5) static
2006/12/13 PHP
无JS,完全php面向过程数据分页实现代码
2012/08/27 PHP
如何使用PHP批量去除文件UTF8 BOM信息
2013/08/05 PHP
无需数据库在线投票调查php代码
2016/07/20 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
jQuery 位置插件
2008/12/25 Javascript
window.onload 加载完毕的问题及解决方案(上)
2009/07/09 Javascript
js Event对象的5种坐标
2011/09/12 Javascript
javascript针对DOM的应用分析(三)
2012/04/15 Javascript
jquery 根据name名获取元素的value值
2015/02/27 Javascript
Nodejs多站点切换Htpps协议详解及简单实例
2017/02/23 NodeJs
jquery将标签元素的高设为屏幕的百分比
2017/04/19 jQuery
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
2017/08/16 Javascript
React Native时间转换格式工具类分享
2017/10/24 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
2018/12/11 jQuery
Vue 中如何正确引入第三方模块的方法步骤
2019/05/05 Javascript
vue 实现微信浮标效果
2019/09/01 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
2019/10/11 Javascript
js实现计时器秒表功能
2019/12/16 Javascript
js实现内置计时器
2019/12/16 Javascript
Python中文编码那些事
2014/06/25 Python
Python实现批量转换文件编码的方法
2015/07/28 Python
酷! 程序员用Python带你玩转冲顶大会
2018/01/17 Python
Python 解决中文写入Excel时抛异常的问题
2018/05/03 Python
使用Tensorflow-GPU禁用GPU设置(CPU与GPU速度对比)
2020/06/30 Python
eDreams巴西:廉价机票,酒店优惠和度假套餐
2017/04/14 全球购物
加热夹克:RAVEAN
2018/10/19 全球购物
Ajax的优点和缺点
2014/11/21 面试题
Python如何实现单例模式
2016/06/03 面试题
化学专业毕业生自荐信
2013/11/15 职场文书
装修致歉信
2014/01/15 职场文书
小学美术教学反思
2014/02/01 职场文书
新闻发布会策划方案
2014/06/12 职场文书
课内比教学心得体会
2014/09/09 职场文书
2014年城管工作总结
2014/11/20 职场文书
交通事故被告答辩状
2015/05/22 职场文书