怎么新建MySQL数据库
发布时间：2022-06-29
作者：admin
阅读：446
阅读：446
这篇文章给大家分享的是HTML页面中怎么实现3D导航栏效果，用到什么方法。小编觉得挺实用的，因此分享给大家做个参考，文中的介绍得很详细，而要易于理解和学习，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。
以上就是关于“HTML页面中怎么实现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页面中怎么实现3D导航栏效果，用到什么方法”的相关知识，感谢各位的阅读，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注群英网络，小编每天都会为大家更新不同的知识。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
相关阅读
长按识别二维码并关注微信
更方便到期提醒、手机管理