使用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 渐变(Gradients)之CSS3 径向渐变
Jul 08 HTML / CSS
详解CSS的border边框属性及其在CSS3中的新特性
May 10 HTML / CSS
Web页面中八种创建多列等高(等高列布局)的实现技术
Dec 24 HTML / CSS
CSS3简单实现照片墙
Dec 12 HTML / CSS
HTML5 canvas基本绘图之绘制矩形
Jun 27 HTML / CSS
HTML5新增的表单元素和属性实例解析
Jul 07 HTML / CSS
逼真的HTML5树叶飘落动画
Mar 01 HTML / CSS
调用HTML5的Canvas API绘制图形的快速入门指南
Jun 17 HTML / CSS
H5 meta小结(前端必看篇)
Aug 24 HTML / CSS
html5使用canvas实现弹幕功能示例
Sep 11 HTML / CSS
HTML5响应式(自适应)网页设计的实现
Nov 17 HTML / CSS
html5开发三八女王节表白神器
Mar 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 Global变量定义当前页面的全局变量实现探讨
2013/06/05 PHP
php中让上传的文件大小在上传前就受限制的两种解决方法
2013/06/24 PHP
preg_match_all使用心得分享
2014/01/31 PHP
CI使用Tank Auth转移数据库导致密码用户错误的解决办法
2014/06/12 PHP
JQury slideToggle闪烁问题及解决办法
2011/07/05 Javascript
js模拟滚动条(横向竖向)
2013/02/22 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
2013/05/30 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
2014/01/10 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
2015/06/19 Javascript
详解AngularJS中自定义过滤器
2015/12/28 Javascript
JavaScript常用判断写法大全(推荐)
2016/05/30 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
2017/05/17 Javascript
angular select 默认值设置方法
2017/06/23 Javascript
JS实现按钮添加背景音乐示例代码
2017/10/17 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
2018/11/30 Javascript
vue中使用vue-cli接入融云实现即时通信
2019/04/19 Javascript
vue通过video.js解决m3u8视频播放格式的方法
2019/07/30 Javascript
python实现360皮肤按钮控件示例
2014/02/21 Python
python抓取网页内容示例分享
2014/02/24 Python
python实现自动重启本程序的方法
2015/07/09 Python
Django框架下在视图中使用模版的方法
2015/07/16 Python
Python win32com 操作Exce的l简单方法(必看)
2017/05/25 Python
Python对列表的操作知识点详解
2019/08/20 Python
pytorch 求网络模型参数实例
2019/12/30 Python
tensorflow 报错unitialized value的解决方法
2020/02/06 Python
python3.4中清屏的处理方法
2020/07/06 Python
迪卡侬英国官网:Decathlon英国
2017/04/08 全球购物
有个性的自我评价范文
2013/11/15 职场文书
观看《永远的雷锋》心得体会
2014/03/12 职场文书
民主生活会批评与自我批评总结
2014/10/17 职场文书
幼儿园教师个人总结
2015/02/05 职场文书
新娘婚礼致辞
2015/07/27 职场文书
五星级酒店宣传口号
2015/12/25 职场文书
美元符号 $
2022/02/17 杂记
Win11快速关闭所有广告推荐
2022/04/19 数码科技
MySQL外键约束(Foreign Key)案例详解
2022/06/28 MySQL