<!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. Java中重写与重载

    重写(覆盖):发生在子类与父类之间:方法名相同方法的个数.类型相同返回值类型小于等于父类的返回值类型 重载:发生在一个类中:方法名相同方法的个数.类型不同返回值类型可以相同也可以不相同

  2. RBAC 几种常见的控制权限模型

    1. 几种常见的权限模型 2. ACL 和 RBAC 对比 3. RBAC 权限模型的优势 (1)简化了用户和权限的关系 (2).易于扩展 易于维护 4.优势(给权限和收回权限) 5.架构

  3. es6 语法 （数组扩展）

    { let arr = Array.of(3, 4, 7, 9, 11); console.log('arr', arr); //[3,4,7,9,11] let empty = Array.of() ...

  4. 广州地区.net相关活动的文章

    此文正在更新中... 复活广州.net俱乐部 office365的开发者训练营,免费,在微软广州举办 被低估的.net(上) - 微软MonkeyFest 2018广州分享会活动回顾

  5. Neutron中插件与代理的总结

    1.总结:

  6. Nginx http相关常用配置总结

    Nginx http相关常用配置总结   by:授客  QQ:1033553122   测试环境 nginx-1.10.0 client_max_body_size Syntax: client_ma ...

  7. 接口自动化 [授客]基于python+Testlink+Jenkins实现的接口自动化测试框架V3.0

    基于python+Testlink+Jenkins实现的接口自动化测试框架V3.0   by:授客 QQ:1033553122     博客:http://blog.sina.com.cn/ishou ...

  8. 【数据分析】线性回归与逻辑回归（R语言实现）

    文章来源:公众号-智能化IT系统. 回归模型有多种,一般在数据分析中用的比较常用的有线性回归和逻辑回归.其描述的是一组因变量和自变量之间的关系,通过特定的方程来模拟.这么做的目的也是为了预测,但有时也 ...

  9. go 利用orm简单实现接口分布式锁

    在开发中有些敏感接口,例如用户余额提现接口,需要考虑在并发情况下接口是否会发生问题.如果用户将自己的多条提现请求同时发送到服务器,代码能否扛得住呢?一旦没做锁,那么就真的会给用户多次提现,给公司带来损 ...

  10. Response()的对象

    addCookie(Cookie cookie):这个方法是向Response容器中添加一个Cookie,然后服务器容器会自动的将这个Cookie回写给客户机的,至于Cookie的相关知识我们会在后面 ...