<!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. github 遇到的问题

    目录 1.遇到的问题关联远程仓库,操作顺序如下:2.解决方法3.git merge 与 git rebase4.git pull 与 git pull --rebase5.更多参考 博客逐步迁移至 极 ...

  2. canvas-8searchLight2.html

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. phpcms有二级导航并且高亮效果代码

    <div class="collapse navbar-collapse" id="example-navbar-collapse"> <ul ...

  4. vue.js及项目实战[笔记]— 03 vue.js插件

    一. vue补充 1. 获取DOM元素 救命稻草,document.querySelector 在template中标示元素`ref = "xxx" 在要获取的时候,this.$r ...

  5. Foundry feats. MultiverseStudio

    https://www.foundry.com/news-awards/foundry-jcube-announcement 经过这么多年的过程,本周本产品终于发布了PR,这次是由Foundry独家代 ...

  6. 配置 Sublime Text 3 作为Python R LaTeX Markdown IDE

    配置 Sublime Text 3 作为Python R LaTeX Markdown IDE 配置 Sublime Text 3 作为Python IDE IDE的基本功能:代码提醒.补全:编译文件 ...

  7. mac 苹果多版本jdk自由切换

    场景 手头上的工具有时候依赖低版本jdk,有时候需要高版本jdk, 如何在不同版本jdk之间来回自由的切换? 安装 首选需要去官网下载dmg安装包,地址:https://www.oracle.com/ ...

  8. java后台打开浏览器代码

    import java.awt.Desktop; import java.io.IOException; import java.net.URI; import java.net.URISyntaxE ...

  9. ubuntu 安装PG10 更新packet 创建超级账号

    ubuntu 安装PG10 更新packet 创建超级账号 安装pg10 我的环境是16.04 server版本 MAC和windows 建议使用安装包 直接官网下载 echo 'deb http:/ ...

  10. selenium的基本用法

    selenium需要配合一个driver  我使用的是chrome的driver 注意一定要下载对应浏览器版本的driver 否则会报错的 http://chromedriver.storage.go ...