纯CSS实现菜单、导航栏的3D翻转动画效果


Posted in HTML / CSS onApril 23, 2014

我曾经向大家展示过闪光的logo,燃烧的火狐狸,多重嵌套动画等例子,今天,我们将要制作一个简单但非常酷的3D翻转菜单。大家可以先看看实际效果,下面有效果截图。

效果图:

纯CSS实现菜单、导航栏的3D翻转动画效果

HTML代码

HTML内容是一些用作菜单的链接,我们在里面添加了一些额外的SPAN标记来帮助实现3D效果:

复制代码
代码如下:

<ul class="block-menu lazy ">
<li><a href="/" class="three-d lazy ">
Home
<span aria-hidden="true" class="three-d-box lazy ">
<span class="front lazy ">Home</span>
<span class="back lazy ">Home</span>
</span>
</a></li>
<li><a href="/demos" class="three-d lazy ">
Demos
<span aria-hidden="true" class="three-d-box lazy ">
<span class="front lazy ">Demos</span>
<span class="back lazy ">Demos</span>
</span>
</a></li>
<!-- more items here -->
</ul>

在A链接标记旁边是一系列的SPAN元素,动画演示过程中,它将用来表现3D立方体的“正面”和“背面”。这些SPAN里的文字和A链接里的文字是一致的。

CSS代码

这个动画的过程就是实现3D变换和元素位置变化。但实际上A链接是没有移动的,动的是SPAN标签,而且是最外层的SPAN标签,内部的SPAN标签被初始化在它的位置上,以后就不做任何变动。每个元素都可以向上翻,并要翻回来,我们使用的是CSS transforms。

复制代码
代码如下:

/* basic menu styles */
.block-menu {
display: block;
background: #000;
}</p> <p>.block-menu li {
display: inline-block;
}
.block-menu li a {
color: #fff;
display: block;
text-decoration: none;
font-family: 'Passion One', Arial, sans-serif;
font-smoothing: antialiased;
text-transform: uppercase;
overflow: visible;
line-height: 20px;
font-size: 24px;
padding: 15px 10px;
}
/* animation domination */
.three-d {
perspective: 200px;
transition: all .07s linear;
position: relative;
cursor: pointer;
}
/* complete the animation! */
.three-d:hover .three-d-box,
.three-d:focus .three-d-box {
transform: translateZ(-25px) rotateX(90deg);
}
.three-d-box {
transition: all .3s ease-out;
transform: translatez(-25px);
transform-style: preserve-3d;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
}
/*
put the "front" and "back" elements into place with CSS transforms,
specifically translation and translatez
*/
.front {
transform: rotatex(0deg) translatez(25px);
}
.back {
transform: rotatex(-90deg) translatez(25px);
color: #ffe7c4;
}
.front, .back {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: black;
padding: 15px 10px;
color: white;
pointer-events: none;
box-sizing: border-box;
}

如果你想看看正面和反面各自是如何旋转移动的,我强烈推荐你们试一下,将其中的一个设置为display: none,让鼠标悬停在它们上面,你将会看到它们各自将完成整个动画的哪一部分动作。

这种实现方式的唯一的缺点是有重复的菜单名称,虽然技术上是隐藏看不出来的,但从代码质量上说存在代码重复问题。然而,从视觉效果上看,它的动画非常顺滑,毫无瑕疵。没有JavaScript,Flash或canvas技术,只是一些简单的CSS标记,这技术CSS动画….一种我们web程序员都应该感谢的技术。

HTML / CSS 相关文章推荐
css3简单练习实现遨游浏览器logo的绘制
Jan 30 HTML / CSS
使用CSS3的ruby-position固定注音位置的用法示例
Jul 05 HTML / CSS
纯HTML5+CSS3制作生日蛋糕代码
Nov 16 HTML / CSS
html5自带表单验证体验优化及提示气泡修改功能
Sep 12 HTML / CSS
前端面试必备之html5的新特性
Sep 05 HTML / CSS
Html5剪切板功能的实现代码
Jun 29 HTML / CSS
HTML 5 input placeholder 属性如何完美兼任ie
May 12 HTML / CSS
使用canvas绘制贝塞尔曲线
Dec 17 HTML / CSS
HTML5中Localstorage的使用教程
Jul 09 HTML / CSS
iframe跨域的几种常用方法
Nov 11 HTML / CSS
带你了解CSS基础知识,样式
Jul 21 HTML / CSS
CSS3实现360度循环旋转功能
Feb 12 HTML / CSS
css3和jquery实现自定义checkbox和radiobox组件
Apr 22 #HTML / CSS
css3实现垂直下拉动画菜单示例
Apr 22 #HTML / CSS
纯CSS改变webkit内核浏览器的滚动条样式
Apr 17 #HTML / CSS
css3实现超立体3D图片侧翻倾斜效果
Apr 16 #HTML / CSS
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
Apr 16 #HTML / CSS
纯CSS实现的大小渐变、渐远效果
Apr 15 #HTML / CSS
CSS中几个与换行有关的属性简明总结
Apr 15 #HTML / CSS
You might like
解决PHP在DOS命令行下却无法链接MySQL的技术笔记
2010/12/29 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
javascript cookie操作类的实现代码小结附使用方法
2010/06/02 Javascript
jquery插件开发方法(初学者)
2012/02/03 Javascript
精心挑选的15个jQuery下拉菜单制作教程
2012/06/15 Javascript
JavaScript调用客户端的可执行文件(示例代码)
2013/11/28 Javascript
JavaScript错误处理
2015/02/03 Javascript
在JavaScript中使用开平方根的sqrt()方法
2015/06/15 Javascript
简单实现js选项卡切换效果
2016/02/03 Javascript
jquery获取复选框的值的简单实例
2016/05/26 Javascript
VUE开发一个图片轮播的组件示例代码
2017/03/06 Javascript
Vue关于数据绑定出错解决办法
2017/05/15 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
2017/06/12 Javascript
深入理解JS异步编程-Promise
2019/06/03 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
2019/12/19 Javascript
python处理图片之PIL模块简单使用方法
2015/05/11 Python
深入解析Python中的__builtins__内建对象
2016/06/21 Python
Python的Tornado框架实现图片上传及图片大小修改功能
2016/06/30 Python
Python 实现字符串中指定位置插入一个字符
2018/05/02 Python
Python实现的读取电脑硬件信息功能示例
2018/05/30 Python
Python 实现子类获取父类的类成员方法
2019/01/11 Python
Python + OpenCV 实现LBP特征提取的示例代码
2019/07/11 Python
python将print输出的信息保留到日志文件中
2019/09/27 Python
python实现根据给定坐标点生成多边形mask的例子
2020/02/18 Python
神经网络训练采用gpu设置的方式
2021/03/03 Python
CSS3实现酷炫的3D旋转透视效果
2019/11/21 HTML / CSS
美国女鞋品牌:naturalizer(娜然)
2016/08/01 全球购物
Whistles官网:英国女装品牌
2020/08/14 全球购物
JavaScript实现页面动态验证码的实现示例
2021/03/23 Javascript
临床医学应届生求职信
2013/11/06 职场文书
金融专业毕业生推荐信
2013/11/26 职场文书
园林资料员岗位职责
2013/12/30 职场文书
路政管理求职信
2014/06/18 职场文书
环境监测与治理技术专业求职信
2014/07/06 职场文书
买房协议书范本
2014/10/23 职场文书
2015年公司新年寄语
2014/12/08 职场文书