css3之3d导航
css3的新属性非常不错，目前IE除外其他浏览器都已支持
实现原理:比如元素a在hover时候可以改变元素b的状态。
效果如本农导航，欢迎采用和建议~
a:hover b{
执行简单动画效果
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D-navBar</title>
<link rel="stylesheet" href="css/3dnavBar.css">
</head>
<body>
<header>
<ul class="block-menu" id="F1">
<li>
<a href="javascript:;" class="three-d">Home
<span class="three-d-box">
<span class="front">Home</span>
<span class="back">Home</span>
</span>
</a>
</li>
<li>
<a href="javascript:;" class="three-d">Html
<span class="three-d-box">
<span class="front">Html</span>
<span class="back">Html</span>
</span>
</a>
</li>
<li>
<a href="javascript:;" class="three-d">CSS
<span class="three-d-box">
<span class="front">CSS</span>
<span class="back">CSS</span>
</span>
</a>
</li>
<li>
<a href="javascript:;" class="three-d">Javascript
<span class="three-d-box">
<span class="front">Javascript</span>
<span class="back">Javascript</span>
</span>
</a>
</li>
<li>
<a href="javascript:;" class="three-d">jQuery
<span class="three-d-box">
<span class="front">jQuery</span>
<span class="back">jQuery</span>
</span>
</a>
</li>
<li>
<a href="javascript:;" class="three-d">ajax
<span class="three-d-box">
<span class="front">ajax</span>
<span class="back">ajax</span>
</span>
</a>
</li>
<li>
<a href="javascript:;" class="three-d">php
<span class="three-d-box">
<span class="front">php</span>
<span class="back">php</span>
</span>
</a>
</li>
<li>
<a href="javascript:;" class="three-d">bootstrap
<span class="three-d-box">
<span class="front">bootstrap</span>
<span class="back">bootstrap</span>
</span>
</a>
</li>
<li>
<a href="javascript:;" class="three-d">angular
<span class="three-d-box">
<span class="front">angular</span>
<span class="back">angular</span>
</span>
</a>
</li>
</ul>
</header>
</body>
</html>
CSS
*{
list-style: none;
margin:;
padding:;
}
.block-menu{
background:#AA7A53;
height:50px;
overflow:hidden;
padding-left:40px;
}
.block-menu li{
float: left;
margin-left: 15px;
}
.block-menu li a{
color:#fff;
text-decoration:none;
text-transform:uppercase;
font-size:16px;
line-height:20px;
font-weight:bold;
font-family: Arial, sans-serif;
display:block;
padding:15px 10px;
}
.three-d-box,.front,.back{
width: 100%;
display: block;
height:50px;
position:absolute;
top:;
left:;
text-align: center;
line-height: 50px;
background:#AA7A53;
}
.three-d{
perspective:200px;
position:relative;
}
.three-d-box{
-webkit-transform-style:preserve-3d;
transform-style:preserve-3d;
-webkit-transform:translateZ(-25px);
-moz-transform:translateZ(-25px);
-o-transform:translateZ(-25px);
-ms-transform:translateZ(-25px);
transform:translateZ(-25px);
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.front{
-webkit-transform:rotateX(0deg) translateZ(25px);
-moz-transform:rotateX(0deg) translateZ(25px);
-o-transform:rotateX(0deg) translateZ(25px);
-ms-transform:rotateX(0deg) translateZ(25px);
transform:rotateX(0deg) translateZ(25px);
}
.back{
-webkit-transform:rotateX(-90deg) translateZ(25px);
-moz-transform:rotateX(-90deg) translateZ(25px);
-o-transform:rotateX(-90deg) translateZ(25px);
-ms-transform:rotateX(-90deg) translateZ(25px);
transform:rotateX(-90deg) translateZ(25px);
}
.three-d:hover .three-d-box{
-webkit-transform: translateZ(-25px) rotateX(90deg);
-moz-transform: translateZ(-25px) rotateX(90deg);
-o-transform: translateZ(-25px) rotateX(90deg);
-ms-transform: translateZ(-25px) rotateX(90deg);
transform: translateZ(-25px) rotateX(90deg);
}
css3之3d导航的更多相关文章
- css3中做3D导航栏
看别人做的一个3D导航栏,觉得很厉害,这里先保存下来,后面有时间好好分析一下: <!doctype html> <html lang="en"> <h ...
- 【css】3d导航效果
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS3制作旋转导航
慕课网学习CSS3时,遇到个习题,觉得有必要总结学习下:CSS3制作旋转导航 慕课网习题地址:http://www.imooc.com/code/1883 示例及源码地址:http://codepen ...
- 纯CSS3实现动态导航栏目
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 网页特效：用CSS3制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- css3的3D和2D
css3的3D旋转:rorateX():参数为正值时,盒子是围绕x轴,完成从Y轴正方向到Y轴负方向的旋转,视觉上呈现高度上的变化.rorateY():参数为正值时,盒子是围绕Y轴,完成从X轴正方向到X ...
- 使用 CSS3 实现 3D 图片滑块效果【附源码下载】
使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...
- CSS3之3D变换实例详解
CSS3的3D效果很赞,本文实现简单的两种3D翻转效果.首先看效果和源代码,文末是文绉绉的总结部分^_^ 以下CSS代码为了简洁没有添加前缀,请视情况自行添加(自动化时代推荐使用其他的一些方法,如gu ...
- CSS3 transforms 3D翻开
R T L B <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
随机推荐
- ie6 z-index不起作用的解决方法
一.概念 z-index伴随着层的概念产生的.网页中,层的概念与photoshop或是flash中层的概念是一致的.熟悉photoshop或是flash的应该知道,层级越高(图层越靠上),越在上面显示 ...
- SVN代码冲突解决方案小集合
对于刚接触svn的人来说,svn冲突后,不能提交是件让人很郁闷的事情.最让人郁闷的事,是代码间的覆盖.你把我代码盖了,我会很火大的.谁把谁的盖了都不爽. 为什么会出现代码冲突问题呢,因为不同的人,同时 ...
- 深入理解DOM事件类型系列第二篇——键盘事件
× 目录 [1]类型 [2]顺序 [3]按键信息[4]应用 前面的话 鼠标和键盘是电脑端主要的输入设备,上篇介绍了鼠标事件,本文将详细介绍键盘事件 类型 键盘事件用来描述键盘行为,主要有keydown ...
- 深入理解DOM节点类型第七篇——文档节点DOCUMENT
× 目录 [1]特征 [2]快捷访问 [3]文档写入 前面的话 文档节点document,隶属于表示浏览器的window对象,它表示网页页面,又被称为根节点.本文将详细介绍文档节点document的内 ...
- Eclipse迁移到Android studio步骤如下：
一.从Eclipse中导出:1.将你的ADT插件版本升级到22.0以上.2.在Eclipse中,选择File-->Export.3.在弹出的导出窗口中,打开Android的文件夹,选择“Gene ...
- EF循环迭代导致如此严重的性能丢失，你知道？
前言 在工作当中呢,没怎么用到过EF,所以为了遗忘这一部分知识,偶尔会去写写小的demo,偶然机会在EF循环迭代中发现居然影响性能这么严重,当我们在用时或许大概也许可能都曾这样写过,但是你注意到了吗, ...
- 《HTML重构》读书笔记&思维导图
最近读了<HTML重构>这本书,以下做出自己的总结归纳,大家可以一起学习交流. 什么是重构?重构是在不改变程序行为的基础上进行小的改动是代码基本逐渐完善的过程,通常需要一些自动化工具的帮助 ...
- spring源码分析之cache demo
spring提供了对echache.guava.jcache的支持,先看一个echache的示例: import org.springframework.cache.CacheManager; imp ...
- 微服务实战（二）：使用API Gateway--转
原文地址:http://dockone.io/article/482 [编者的话]本系列的第一篇介绍了微服务架构模式.它讨论了采用微服务的优点和缺点,除了一些复杂的微服务,这种模式还是复杂应用的理想选 ...
- 配置React Native环境
一. 安装Homebrew: “Homebrew installs the stuff you need that Apple didn’t.——Homebrew OS X 更完整”. Homebr ...