<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>css3实现3D立体翻转导航特效</title>

<style>

body {

    background:#edecec;

}

/* basic menu styles */

.nav-menu {

    display: block;

    /* background: #74adaa;*/

    width:950px;

    margin: 50px auto 150px;

}

.nav-menu > li {

    display: inline;

    float:left;

    border-right:1px solid #94c0be;

}

.nav-menu > li:last-child {

    border-right: none;

}

.nav-menu li a {

    color: #fff;

    display: block;

    text-decoration: none;

    /*调用本地字体*/

    font-family:sansationregular;

    -webkit-font-smoothing: antialiased;

    -moz-font-smoothing: antialiased;

    font-smoothing: antialiased;

    text-transform: capitalize;

    overflow: visible;

    line-height: 20px;

    font-size: 20px;

    padding: 15px 30px 15px 31px;

}

.three-d {

    /* 任务三、设置3D舞台布景 */

    -webkit-perspective: 200px;

    -moz-perspective: 200px;

    -ms-perspective: 200px;

    -o-perspective: 200px;

    perspective: 200px;

          /*任务四、设置3D舞台布景过渡效果*/

    -webkit-transition: all .07s linear;

     -moz-transition: all .07s linear;

     -ms-transition: all .07s linear;

     -o-transition: all .07s linear;

     transition:all .7s linear;

    position: relative;

}

.three-d:not(.active):hover {

    cursor: pointer;

}

/*任务五、给不是当前状态的3D舞台的悬浮与聚焦状态设置变形效果*/

.three-d:not(.active):hover .three-d-box,  .three-d:not(.active):focus .three-d-box {

    -wekbit-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);

/*    -webkit-transform:rotateX(90deg) translatez(-25px);*/

       /*   -webkit-transform:rotatex(90deg);*/

}

.three-d-box {

          /*任务六、给3D舞台中“.three-d-box”设置过渡与变形效果*/

    -webkit-transition: all .3s ease-out;

     -moz-transition: all .3s ease-out;

     -ms-transition: all .3s ease-out;

     -o-transition: all .3s ease-out;

     transition: all .3s ease-out;

    -webkit-transform: translatez(-25px);

    -moz-transform: translatez(-25px);

    -ms-transform: translatez(-25px);

    -o-transform: translatez(-25px);

    transform: translatez(-25px);

    -webkit-transform-style: preserve-3d;

    -moz-transform-style: preserve-3d;

    -ms-transform-style: preserve-3d;

    -o-transform-style: preserve-3d;

    transform-style: preserve-3d;

    -webkit-pointer-events: none;

    -moz-pointer-events: none;

    -ms-pointer-events: none;

    -o-pointer-events: none;

    pointer-events: none;

    position: absolute;

    top: 0;

    left: 0;

    display: block;

    width: 100%;

    height: 100%;

}

/*任务七、给导航设置3D前，与3D后变形效果*/

.front {

    -webkit-transform: rotatex(0deg) translatez(25px);

    -moz-transform: rotatex(0deg) translatez(25px);

    -ms-transform: rotatex(0deg) translatez(25px);

    -o-transform: rotatex(0deg) translatez(25px);

    transform: rotatex(0deg) translatez(25px);

}

.back {

    -webkit-transform: rotatex(-90deg) translatez(25px);

    -moz-transform: rotatex(-90deg) translatez(25px);

    -ms-transform: rotatex(-90deg) translatez(25px);

    -o-transform: rotatex(-90deg) translatez(25px);

    transform: rotatex(-90deg) translatez(25px);

    color: #FFE7C4;

}

.front, .back {

    /*          border:1px solid red;*/

    display: block;

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    left: 0;

    background: #74adaa;

    padding: 15px 30px 15px 31px;

    color: white;

    -webkit-pointer-events: none;

    -moz-pointer-events: none;

    -ms-pointer-events: none;

    -o-pointer-events: none;

    pointer-events: none;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

}

/*任务八、设置导航当前状态与悬浮状态下的背景效果*/

.nav-menu li .active .front,  .nav-menu li .active .back,  .nav-menu li a:hover .front,  .nav-menu li a:hover .back {

    background-color: #51938f;

    -webkit-background-size: 5px 5px;

    background-size: 5px 5px;

    background-position: 0 0, 30px 30px;

    background-image: -webit-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);

    background-image: -moz-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);

    background-image: -ms-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);

    background-image: -o-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);

    background-image: linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);

}

.nav-menu ul {

    position: absolute;

    text-align: left;

    line-height: 40px;

    font-size: 14px;

    width: 200px;

    -webkit-transition: all 0.3s ease-in;

    -moz-transition: all 0.3s ease-in;

    -ms-transition: all 0.3s ease-in;

    -o-transition: all 0.3s ease-in;

    transition: all 0.3s ease-in;

    -webkit-transform-origin: 0px 0px;

    -moz-transform-origin: 0px 0px;

    -ms-transform-origin: 0px 0px;

    -o-transform-origin: 0px 0px;

    transform-origin: 0px 0px;

    -webkit-transform: rotateX(-90deg);

    -moz-transform: rotateX(-90deg);

    -ms-transform: rotateX(-90deg);

    -o-transform: rotateX(-90deg);

    transform: rotateX(-90deg);

    -webkit-backface-visibility: hidden;

    -moz-backface-visibility: hidden;

    -ms-backface-visibility: hidden;

    -o-backface-visibility: hidden;

    backface-visibility: hidden;

}

/*任务九、显示下拉导航菜单，并其设置一个变形效果*/

.nav-menu > li:hover ul {

    -webkit-transform: rotateX(0deg);

    -moz-transform: rotateX(0deg);

    -ms-transform: rotateX(0deg);

    -o-transform: rotateX(0deg);

    transform: rotateX(0deg);

}

</style>

</head>

<body>

<!--代码部分begin-->

<div id="nav">

  <ul class="nav-menu clearfix unstyled">

    <li><a href="#" class="three-d active"> Home <span class="three-d-box"><span class="front">Home</span><span class="back">Home</span></span> </a></li>

    <li><a href="#" class="three-d"> Services <span class="three-d-box"><span class="front">Services</span><span class="back">Services</span></span> </a></li>

    <li><a href="#" class="three-d"> Products <span class="three-d-box"><span class="front">Products</span><span class="back">Products</span></span> </a></li>

    <li><a href="#" class="three-d"> About <span class="three-d-box"><span class="front">About</span><span class="back">About</span></span> </a></li>

    <li><a href="#" class="three-d"> Contact <span class="three-d-box"><span class="front">Contact</span><span class="back">Contact</span></span> </a></li>

    <li><a href="#" class="three-d"> Blog <span class="three-d-box"><span class="front">Blog</span><span class="back">Blog</span></span></a>

      <ul class="clearfix unstyled drop-menu">

        <li><a href="#" class="three-d"> Html5 <span class="three-d-box"><span class="front">Html5</span><span class="back">Html5</span></span> </a></li>

        <li><a href="#" class="three-d"> Css3 <span class="three-d-box"><span class="front">Css3</span><span class="back">Css3</span></span> </a></li>

        <li><a href="#" 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="#" class="three-d"> Videogames <span class="three-d-box"><span class="front">Videogames</span><span class="back">Videogames</span></span> </a></li>

      </ul>

    </li>

    <li><a href="#" class="three-d"> Shop On-line <span class="three-d-box"><span class="front">Shop On-line</span><span class="back">Shop On-line</span></span> </a></li>

  </ul>

</div>

<!--代码部分end-->

</body>

</html>

【css】3d导航效果的更多相关文章

  1. Codrops 优秀教程：CSS 3D Transforms 实现书本效果

    这个使用  CSS 3D Transforms 实现创意书本效果的来自 Codrops 网站.你可以看到两种类型的书设计:精装书和平装书.这两个效果都可以很容易地使用 CSS 修改.赶紧体验一下吧. ...

  2. CSS实现商城分类导航效果（hover选择器）

    学完制作出这个导航效果之后,收获最多的是了解了hover选择器的功能,:hover 选择器用于选择鼠标指针浮动在上面的元素.在鼠标移到元素上时向此元素添加特殊的样式(CSS).例如:改变鼠标悬停处的元 ...

  3. css之纯css实现流程导航效果

    :::tip 使用纯css线上 流程导航效果.     本文统一采取 flex 布局 ,你也可以采用其他布局实现,核心原理不变 ::: ## 方法一 利用裁剪  该方法IE下不支持 利用裁剪 clip ...

  4. 学习 CSS 之用 CSS 3D 实现炫酷效果

    一.前言 把大象关进冰箱需要几步?三步,把冰箱门打开,把大象关进去,把冰箱门关上. 用 CSS 实现 3D 效果需几步?三步,设置透视效果 perspective,改变元素载体为 preserve-3 ...

  5. 3D 穿梭效果？使用 CSS 轻松搞定

    背景 周末在家习惯性登陆 Apex,准备玩几盘.在登陆加速器的过程中,发现加速器到期了. 我一直用的腾讯网游加速器,然而点击充值按钮,提示最近客户端升级改造,暂不支持充值(这个操作把我震惊了~).只能 ...

  6. 简单几步用纯CSS3实现3D翻转效果

    作为前端开发人员的必修课,CSS3翻转能带我们完成许多基本动效,本期我们将用CSS3实现hover翻转效果~ 第一步非常简单,我们简单画1个演示方块,为其 添加transition和transform ...

  7. css3中做3D导航栏

    看别人做的一个3D导航栏,觉得很厉害,这里先保存下来,后面有时间好好分析一下: <!doctype html> <html lang="en"> <h ...

  8. 10个超漂亮的CSS 3D特效

    10个超漂亮的CSS 3D特效 一.总结 一句话总结: 后面有空得好好练一练,也可以作为录课素材 二.10个超漂亮的CSS 3D特效 转自或参考:10个超漂亮的CSS 3D特效https://blog ...

  9. CSS3 3D立方体效果－transform也不过如此

    CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...

随机推荐

  1. Excel通用类工具(一)

    前言 最近项目中遇到要将MySQL数据库中的某些数据导出为Excel格式保存,在以前也写过这样的功能,这次就准备用以前的代码,但是看了一下,这次却不一样,因为在以前用到的都是导出一种或几种数据,种类不 ...

  2. hash 和pushState，replaceState

    hash 要点: 1.不会向后台发请求:#是用来指导浏览器动作的,对服务器端完全无用. 2.用来跳转到页面的指定位置:   为网页位置指定标识符,有两个方法.一是使用锚点,比如<a name=& ...

  3. windows 上用 docker 部署aspnetcore 2.0

       首先下载docker for windows 并且 安装. 这其中需要显卡支持虚拟化  windows系统升级到专业版  bois 启用虚拟   通过vs2017 创建一个net core ap ...

  4. PHP微信H5支付

    今天项目用到了微信新出的h5支付直接去官网 https://pay.weixin.qq.com/wiki/doc/api/index.html找dome去了找了之后才发现没有一脸懵逼,一开始以为和公众 ...

  5. JS中数组重排序方法

    在数组中有两个可以用来直接排序的方法,分别是reverse()和sort().下面通过本文给大家详细介绍,对js数组重排序相关知识感兴趣的朋友一起看看吧 1.数组中已存在两个可直接用来重排序的方法:r ...

  6. jQuery 练习：取出数组字典的值, 静态对话框, clone方法应用

    jQuery 中文API文档 http://jquery.cuishifeng.cn/ jQuery 取出数组字典的值 <head> <meta charset="UTF- ...

  7. LNMP的配置与优化

    一.LNMP的下载 LNMP一键安装包是一个用Linux Shell编写的可以为CentOS/RadHat/Fedora.Debian/Ubuntu/Raspbian/Deepin VPS或独立主机安 ...

  8. springmvc 获取请求头信息

    @PostMapping("/test/post") public void post(@RequestBody String params, @RequestHeader(req ...

  9. Spring学习之旅（一）极速创建Spring框架java工程项目

    编译工具:eclipse 1)创建java工程:Spring_helloworld 2)导入所需jar包: 3)创建一个实体类: public class HelloBeans { private S ...

  10. 浅谈Android 混淆和加固

    混淆: 针对项目代码,代码混淆通常将代码中的各种元素(变量.函数.类名等)改为无意义的名字,使得阅读的人无法通过名称猜测其用途,增大反编译者的理解难度. 虽然代码混淆可以提高反编译的门槛,但是对开发者 ...