使用css实现3D导航

使用css可以实现如下图的3D导航效果

首先创建如下结构,三个首页与index并列的span标签

<body><div class="nav"><ul><li><a href=""><span>首页</span><span>index</span></a></li></ul><ul><li><a href=""><span>首页</span><span>index</span></a></li></ul><ul><li><a href=""><span>首页</span><span>index</span></a></li></ul></div></body>

需要实现首页在前index在后的效果需要用到父相子绝的定位效果,同时给li加上浮动

        .nav li a span {position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;text-align: center;line-height: 40px;}ul {/*去除小圆点*/list-style: none;float: left;margin-right: 20px;}

此时因为css层叠性后面的盒子会顶上来,选中第一个span使其向前移动

        .nav li a span:first-child {background-color: green;transform: translateZ(20px);}

接下来开启3D效果,并设置字体样式,加上过渡效果

        a {position: relative;display: block;text-decoration: none;color: #fff;width: 200px;height: 40px;font-size: 20px;transform-style: preserve-3d;transition: all 2s;}

给a加上hover使其翻转,同时让后面的span反方向翻转同时向前移动

        .nav li a:hover {transform: rotateX(-90deg);}.nav li a span:last-child {transform: translateY(-20px) rotateX(90deg);background-color: aqua;}

大功告成!

使用css实现3D导航相关推荐

CSS高级功能—3D空间转换（位移、透视、空间旋转）—3D导航—3D缩放
一.空间(3D)转换目标:使用transform属性实现元素在空间内的位移.旋转.缩放等效果. 属性:transform (1)位移效果(Z轴方向需要配合perspective透视使用) 空间位移的 ...
HTML+CSS中的3D转换translate/rotate 旋转木马/翻转盒子/3D导航栏
前面我们已经介绍过了2D转换,那么我们即将学习的3D转换又是什么呢,它跟2D转换有什么不同呢? 在我们日常生活的环境就是3D的,我们多看到的物体也都是3D的,而我们拍的照片就是3D物体在2D平面中呈现 ...
使用HTML+Css+transform实现3D导航栏-小白进阶必备
3D是three-dimensional的缩写,就是三维图形.在计算机里显示3D图形,就是说在平面里显示三维图形.不像现实世界里,真实的三维空间,有真实的距离空间.计算机里只是看起来很像真实世界,因此 ...
css3中做3D导航栏
看别人做的一个3D导航栏,觉得很厉害,这里先保存下来,后面有时间好好分析一下: <!doctype html> <html lang="en"> <h ...
前端小案例之3D导航栏
简单3D导航栏案例-鼠标经过盒子时底部盒子旋转最近入门学习前端用简单的html结构加CSS样式写了个3D导航栏的小案例在这里分享给大家. 文章目录简单3D导航栏案例-鼠标经过盒子时底部盒子旋转一 ...
html css3d效果,html，css的3D变形
html,css的3D变形: 首先要了解一个概念:景深perspective 景深可以营造一个近大远小的效果,在IE.opera浏览器目前不支持这个属性,在safari和chrome里,要用-webk ...
php3d按钮,CSS实现3D按钮效果
这次给大家带来CSS实现3D按钮效果,CSS实现3D按钮效果的注意事项有哪些,下面就是实战案例,一起来看一下. css巧妙利用了box-shadow来实现3D物体的立体感,当按钮按下的时候再去修改bo ...
html京东下拉菜单设置,div css下拉导航菜单（图+演示）
div css下拉导航菜单(图+演示),div css下拉导航菜单,css导航菜单下拉 CSS导航菜单(CSS下拉菜单演示图) 查看演示-CSS下拉菜单样式:下拉导航菜单/ 以下有DIV CSS下拉菜 ...
HTML+CSS制作3D旋转相册
一.HTML+CSS制作3D旋转相册哈哈哈,放寒假啦!又可以好好闭关修炼了,最近,在抽屉里无意中翻到了自己上小学时的照片,太可爱啦,照片我就不贴出来了,于是,我就想着用所学的知识,做一个3D旋转相册 ...

使用css实现3D导航

使用css实现3D导航相关推荐

最新文章

热门文章