使用HTML+Css+transform实现3D导航栏的示例代码
发布时间：2021-03-31 17:18:47 作者：信工院李平 
我要评论
我要评论这篇文章主要介绍了使用HTML+Css+transform实现3D导航栏的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
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 transform实现3D导航栏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了html+css+js实现导航栏滚动渐变效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-01-28
这篇文章主要介绍了Html5导航栏吸顶方案原理与对比实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起2020-06-10
这篇文章主要介绍了html5 横向滑动导航栏的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习2020-05-08- 这篇文章主要介绍了基于html+css 实现简易导航栏功能，主要就是css（级联样式表）对html的内容做格式化。具体内容详情大家跟随小编一起通过本文学习吧2021-04-07
- 本篇文章给大家分享基于html和CSS3制作简单侧边导航栏，效果简单大方，需要的朋友可以从参考下2016-02-25
本篇文章给大家分享基于html和CSS3制作酷炫的导航栏，效果非常美观，需要的朋友可以从参考下2015-09-23
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
这篇文章主要介绍了使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色),本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以2021-04-07
最新评论