3D导航栏

3D导航栏

关注
发信
关注(28)粉丝(399)

css3中做3D导航栏

看别人做的一个3D导航栏，觉得很厉害，这里先保存下来，后面有时间好好分析一下：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>制作3D旋转导航</title>

    <style>

        @import url("http://www.w3cplus.com/demo/css3/base.css");

        /*任务一：引入本地字体文件*/

        @font-face{

            font-family:"fontt";

            src: url("http://www.imooc.com/Amaranth-BoldItalic.otf");

        }

        body {

            background-color:#edecec;

        }

        /* basic menu styles */

        .nav-menu {

            display: block;

            width:950px;

            margin: 50px auto 150px;

        }

        .nav-menu > li {

            display:inline;

            float:left;

            border-right:1px solid #edecec;

        }

        .nav-menu > li:last-child {

            border-right: none;

        }

        .nav-menu li a {

            color: #fff;

            display: block;

            text-decoration: none;

            /*调用本地字体*/

            font-family:fontt;

            -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舞台布景 */

            perspective:200px;

            /*任务三  设置a元素.three-d为距离200px的3D舞台

            perspective理论是用户通过屏幕看到3D元素的距离，以像素px为单位

            */

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

            transition:all 0.3s 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 {

            transform:translateZ(-25px) rotateX(90deg);

            /*

            translateZ改变3D元素的Z轴高度，以用户看屏幕为准

            X是左右，Y是上下，Z可以理解为自身的深度,对于用户就是前后(屏幕距离)

            如果3D元素X轴旋转90度后，Z轴以用户看屏幕就变成了上下,

            X轴依旧是左右,Y轴变成了前后(屏幕距离)。

            这里没图说不清楚，看个人理解吧

            这里再次设置translateZ(-25px)是因为获取焦点后

            不会保留原本的translateZ数值

            rotateX改变3D元素的X轴角度,比如把这个元素横着插一根牙签，然后旋转

            (怎么转自己想，难道还能左右转)

            */

        }

        .three-d-box {

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

            transition:all 0.3s linear;

            transform:translateZ(-25px);

            /*这里先设置translateZ(-25px)是为了子元素旋转效果需求，

            不然会造成拉近屏幕(深度)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;

            /*规定如何在3D空间呈现子元素,(是否3D视图)*/

            -webkit-pointer-events: none;

            -moz-pointer-events: none;

            -ms-pointer-events: none;

            -o-pointer-events: none;

            pointer-events: none;

            /*pointer-events设置元素对于鼠标事件的限制*/

            position: absolute;

            top: 0;

            left: 0;

            display: block;

            width: 100%;

            height: 100%;

        }

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

        .front {/*这个是未获取焦点时显示的那一面(正面)*/

            transform:rotateX(0deg) translateZ(25px);

            /*设置正面X轴不旋转(默认不转可以不设置)

            translateZ(25px)拉近正面深度距离，目的是不与背面重合

            */

        }

        .back {/*这个是获取焦点旋转后的那一面(底下货值背面)*/

            transform:rotateX(-90deg) translateZ(25px);

            /*设置背面X轴旋转-90度，

            translateZ(25px)因为已经旋转了，所以Z轴变成了上下，

            因为旋转的是-90 ， 反向，所以Z轴25px是向下，

            设置Z轴是为了和正面的底边接触，而不是正面的中点(一横)

            */

            color: #FFE7C4;

        }

        .front, .back {

            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;

            background-size: 5px 5px;

            background-size: 5px 5px;

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

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

            /*这里-90deg是先把下拉旋转90度，形成隐藏的假象*/

            -webkit-backface-visibility: hidden;

            -moz-backface-visibility: hidden;

            -ms-backface-visibility: hidden;

            -o-backface-visibility: hidden;

            backface-visibility: hidden;

        }

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

        .nav-menu > li:hover ul {

            display: block;

            transform:rotateX(0deg);

            /*获取焦点将下拉旋转回正面*/

        }

    </style>

</head>

<body>

<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>

            <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">

            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>

            <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">

            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>

</body>

</html>

效果如下：

css3中做3D导航栏-LMLPHP

05-11 13:43
Powered by LMLPHP ©2024 3D导航栏 0.061449