<!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. Deep Learning - 1 神经网络

    Artificial Neuron 人工神经元有: Perceptrons(感知机) Sigmoid Perceptron 感知机input是多个二进制,output是一个二进制. graph LR ...

  2. power designer的安装

    PowerDesigner的安装 原由:新学期要开概要设计(软件设计与体系结构)这门课,老师推荐了两个CASE工具. Rational Rose Power Designer 本来想找rose的资源, ...

  3. 【PHPStorm使用手册】php interpreter is not configured

    php interpreter is not configured 未配置php解析器 第一步: 引入下载好的php.exe 打开窗口 file -> settings -> Langua ...

  4. win7文件搜索技巧

    重要说明   (1)搜索的字符串是大小写不敏感的 (2)字符串带双引号与不带双引号是有区别的 如:hello,搜索包含hello单词开头的文件或目录,名为“aa_HELLOcc...”.“cc-Hel ...

  5. UnrealEd3视图导航及常用快捷键

    本博客使用的版本:2010-08   [更多其他的UE3版本][tps所用版本: 2011-02]     [最新的UE3版本 -- 2015-02] [unreal engine wiki  中文w ...

  6. [20190226]测试使用bbed恢复索引.txt

    [20190226]测试使用bbed恢复索引.txt --//上午做tab$删除恢复测试时发现,tab$的索引i_tab1很小.可以尝试使用bbed解决这个问题.--//首先在普通表上做一个测试看看. ...

  7. [20190219]那个更快(11g).txt

    [20190219]那个更快(11g).txt --//前几天测试11g Query Result Cache RC Latches时,链接http://blog.itpub.net/267265/v ...

  8. SQL WHERE 子句

    WHERE 子句 如需有条件地从表中选取数据,可将 WHERE 子句添加到 SELECT 语句. 语法 SELECT 列名称 FROM 表名称 WHERE 列 运算符 值 释意:选取 [列] 来自 [ ...

  9. xpath语法大全

    XPath 节点 XPath 术语 节点 在 XPath 中,有七种类型的节点:元素.属性.文本.命名空间.处理指令.注释以及文档(根)节点.XML 文档是被作为节点树来对待的.树的根被称为文档节点或 ...

  10. Win10家庭版-添加[组策略]

    win10家庭版有很多功能都不能用,这一次就碰到了一个找不到‘组策略’的问题,在网上搜索到了一个方法,记录一下: 新建一个txt,将下面内容复制到文本中: =====分隔符====== @echo o ...