使用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 弹性布局快速入门
Jun 06 HTML / CSS
带有css3动画效果的兼容多浏览器简单导航条示例
Jan 26 HTML / CSS
CSS3实现超慢速移动动画效果非常流畅无卡顿
Jun 15 HTML / CSS
基于DOM+CSS3实现OrgChart组织结构图插件
Mar 02 HTML / CSS
HTML5 Web 存储详解
Sep 16 HTML / CSS
HTML5标签小集
Aug 02 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(一)
Jan 21 HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
May 03 HTML / CSS
详解使用双缓存解决Canvas clearRect引起的闪屏问题
Apr 29 HTML / CSS
用canvas显示验证码的实现
Apr 10 HTML / CSS
HTML5跳转小程序wx-open-launch-weapp的示例代码
Jul 16 HTML / CSS
html+css实现环绕倒影加载特效
Jul 07 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中执行系统外部命令
2006/10/09 PHP
PHP 输出缓存详解
2009/06/20 PHP
PHP进阶学习之命名空间基本用法分析
2019/06/18 PHP
div当滚动到页面顶部的时候固定在顶部实例代码
2013/05/27 Javascript
改变隐藏的input中value的值代码
2013/12/30 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
2017/01/20 Javascript
angular实现商品筛选功能
2017/02/01 Javascript
Node.js连接MongoDB数据库产生的问题
2017/02/08 Javascript
详解vue.js的事件处理器v-on:click
2017/06/27 Javascript
React Native 环境搭建的教程
2017/08/19 Javascript
angularjs路由传值$routeParams详解
2020/09/05 Javascript
jQuery实现输入框的放大和缩小功能示例
2018/07/21 jQuery
微信小程序中使用wxss加载图片并实现动画效果
2018/08/13 Javascript
javascript中的this作用域详解
2019/07/15 Javascript
Python中如何优雅的合并两个字典(dict)方法示例
2017/08/09 Python
Python实现字符串格式化输出的方法详解
2017/09/20 Python
python 读取目录下csv文件并绘制曲线v111的方法
2018/07/06 Python
对python 命令的-u参数详解
2018/12/03 Python
通过python爬虫赚钱的方法
2019/01/29 Python
Python实现从SQL型数据库读写dataframe型数据的方法【基于pandas】
2019/03/18 Python
探秘TensorFlow 和 NumPy 的 Broadcasting 机制
2020/03/13 Python
YSL圣罗兰美妆美国官网:Yves Saint Lauret US
2016/11/21 全球购物
The North Face官方旗舰店:美国著名户外品牌
2020/09/28 全球购物
为什么需要版本控制
2016/10/28 面试题
大学自我鉴定范文
2013/12/26 职场文书
yy结婚证婚词
2014/01/10 职场文书
大学生职业生涯规划范文
2014/01/22 职场文书
高中毕业自我评价
2014/02/08 职场文书
总结表彰大会主持词
2014/03/26 职场文书
市场营销毕业生自荐信范文
2014/04/01 职场文书
初中学生评语大全
2014/04/24 职场文书
服务标语大全
2014/06/18 职场文书
Python 多线程之threading 模块的使用
2021/04/14 Python
MySQL 如何限制一张表的记录数
2021/09/14 MySQL
Python机器学习应用之基于线性判别模型的分类篇详解
2022/01/18 Python
Nginx本地配置SSL访问的实例教程
2022/05/30 Servers