简单3D导航栏案例-鼠标经过盒子时底部盒子旋转

最近入门学习前端用简单的html结构加CSS样式写了个3D导航栏的小案例在这里分享给大家。

文章目录

- 简单3D导航栏案例-鼠标经过盒子时底部盒子旋转
一、案例介绍？
二、案例代码
- 1.HTML结构
- 2.CSS样式
总结

一、案例介绍？

效果如下:

该案例主要是在一个navbar导航栏的盒子里面放几个li，每个li里面包含一个span便签和一个链接，这个span标签是初始正对着我们的，当我们用鼠标经过这个li下面的span时，就把下面的a便签也就是链接旋转上来并且可以对链接进行设置需要跳转到哪个界面。

二、案例代码

1.HTML结构

代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="style.css">
</head><body><ul class="navbar"><li><div class="case"><span class="front">首页</span><a href="#" class="bottom">进入</a></div></li><li><div class="case"><span class="front">子页面1</span><a href="#" class="bottom">进入</a></div></li><li><div class="case"><span class="front">子页面2</span><a href="#" class="bottom">进入</a></div></li><li><div class="case"><span class="front">子页面3</span><a href="#" class="bottom">进入</a></div></li><li><div class="case"><span class="front">子页面4</span><a href="#" class="bottom">进入</a></div></li><li><div class="case"><span class="front">子页面5</span><a href="#" class="bottom">进入</a></div></li><li><div class="case"><span class="front">子页面6</span><a href="#" class="bottom">进入</a></div></li><li><div class="case"><span class="front">子页面7</span><a href="#" class="bottom">进入</a></div></li><li><div class="case"><span class="front">子页面8</span><a href="#" class="bottom">进入</a></div></li><li><div class="case"><span class="front">子页面9</span><a href="#" class="bottom">进入</a></div></li><li><div class="case"><span class="front">子页面10</span><a href="#" class="bottom">进入</a></div></li><li><div class="case"><span class="front">子页面11</span><a href="#" class="bottom">进入</a></div></li><li><div class="case"><span class="front">子页面12</span><a href="#" class="bottom">进入</a></div></li></ul>
</body></html>

2.CSS样式

代码如下：

/* 清除内外边距 */
* {margin: 0;padding: 0;
}.navbar {width: 1200px;height: 34px;margin: 100px auto;border: 1px solid rgba(0, 0, 0, .3);/* 边框设置 */border-radius: 10px;
}.navbar li {float: left;margin: 0 5px;width: 80px;height: 34px;font-size: 13px;list-style: none;/* 让li下面的子盒子都有透视效果 */perspective: 600px;
}.navbar li a {/* 去除进入链接下面的下划线 */text-decoration: none;
}.case {position: relative;width: 100%;height: 100%;/* 使得子盒子上的文字都居中显示 */text-align: center;line-height: 34px;/* 由于子级元素设置了3D效果，如果父级这里不加这个属性的话子级的3D效果就不会显示出来 */transform-style: preserve-3d;/* 加一个旋转的过渡效果 */transition: all .6s;
}.case:hover {/* 经过盒子则旋转90度显示下方的盒子 */transform: rotateX(90deg);
}.front,
.bottom {position: absolute;left: 0;top: 0;width: 100%;height: 100%;
}.front {/* z-index 属性指定一个元素的堆叠顺序，让需要初始显示的盒子堆叠顺序更高。 */z-index: 1;/* 往我们的面前移动所以是正的并且移动盒子高度的一半使得可以绕着中心点旋转 */transform: translateZ(17px);color: #666;
}.bottom {/* 往前倒必须是负值因为旋转上去底部的盒子字体要是正对我们的 *//* 往下走高度的一半 *//* 如果有移动或者其他的样式必须先写我们的移动 */transform: translateY(17.5px) rotateX(-90deg);color: orange;
}

这里是结构与样式分离将上面的CSS样式命名为style.css然后用link导入到html文件中即可以用，也可以将样式用style标签写到html文件里的title下。

总结

刚学习前端没多久，想将每天学到的小案例分享给大家，写的不好的地方还望大家多多指教。

前端小案例之3D导航栏相关推荐

HTML+CSS中的3D转换translate/rotate 旋转木马/翻转盒子/3D导航栏
前面我们已经介绍过了2D转换,那么我们即将学习的3D转换又是什么呢,它跟2D转换有什么不同呢? 在我们日常生活的环境就是3D的,我们多看到的物体也都是3D的,而我们拍的照片就是3D物体在2D平面中呈现 ...
3D转换 —— 两面翻转盒子和3d导航栏
3d转换和2d转换的最大区别就是,2d是二维坐标系,是平面的,而3d是三维坐标系,具有空间感.立体感.在3d转换中,有两个特别重要的属性perspective.transform - style. p ...
使用HTML+Css+transform实现3D导航栏-小白进阶必备
3D是three-dimensional的缩写,就是三维图形.在计算机里显示3D图形,就是说在平面里显示三维图形.不像现实世界里,真实的三维空间,有真实的距离空间.计算机里只是看起来很像真实世界,因此 ...
html+css3 3d导航栏
效果图参考于https://www.bilibili.com/video/BV1xq4y1q7jZ?p=37 如有侵权还请速速联系 1.html部分 <div class="navs ...
案例-翻转的导航栏（CSS3）
案例-翻转的导航栏(CSS3) <!DOCTYPE html> <html lang="en"><head><meta charset=& ...
微信小程序自定义顶部导航栏标题 navigationStyle
微信小程序自定义顶部导航栏标题单页面自定义导航栏修改需要自定义的页面,的页面配置.json文件全部页面自定义导航修改公共页面配置app.json 单页面自定义导航栏修改需要自定义的页面,的 ...
微信小程序制作顶部导航栏
1问题描述使用微信小程序开发者工具制作顶部导航栏. 2算法描述首先就是对微信小程序开发者工具的配置,官网搜索后进入,选择稳定版,Windows64位下载. 然后点开开发者工具,选择小程序,点击图片 ...
微信小程序之顶部导航栏（选项卡）实例 —— 微信小程序实战系列（1）
需求:顶部导航栏效果图: wxml:  <view class="navbar"><text wx:for="{{na ...
uni-app实现小程序沉浸式导航栏/顶部组件占满导航栏
uni-app实现小程序沉浸式导航栏/顶部组件占满导航栏如果你只是想单纯的让屏幕最上方的那个组件(比如swiper)将通知栏(导航栏)填充满,那么你只需要在page.json文件中加入以下代码到你想 ...

前端小案例之3D导航栏