css3之3d导航

css3的新属性非常不错，目前IE除外其他浏览器都已支持

实现原理:比如元素a在hover时候可以改变元素b的状态。

效果如本农导航，欢迎采用和建议~

a:hover b{

执行简单动画效果

}

HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>3D-navBar</title>

    <link rel="stylesheet" href="css/3dnavBar.css">

</head>

<body>

<header>

    <ul class="block-menu" id="F1">

        <li>

            <a href="javascript:;" class="three-d">Home

                <span class="three-d-box">

                    <span class="front">Home</span>

                    <span class="back">Home</span>

                </span>

            </a>

        </li>

        <li>

            <a href="javascript:;" class="three-d">Html

                <span class="three-d-box">

                    <span class="front">Html</span>

                    <span class="back">Html</span>

                </span>

            </a>

        </li>

        <li>

            <a href="javascript:;" class="three-d">CSS

                <span class="three-d-box">

                    <span class="front">CSS</span>

                    <span class="back">CSS</span>

                </span>

            </a>

        </li>

        <li>

            <a href="javascript:;" 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="javascript:;" class="three-d">jQuery

                <span class="three-d-box">

                    <span class="front">jQuery</span>

                    <span class="back">jQuery</span>

                </span>

            </a>

        </li>

        <li>

            <a href="javascript:;" class="three-d">ajax

                <span class="three-d-box">

                    <span class="front">ajax</span>

                    <span class="back">ajax</span>

                </span>

            </a>

        </li>

        <li>

            <a href="javascript:;" class="three-d">php

                <span class="three-d-box">

                    <span class="front">php</span>

                    <span class="back">php</span>

                </span>

            </a>

        </li>

        <li>

            <a href="javascript:;" class="three-d">bootstrap

                <span class="three-d-box">

                    <span class="front">bootstrap</span>

                    <span class="back">bootstrap</span>

                </span>

            </a>

        </li>

        <li>

            <a href="javascript:;" class="three-d">angular

                <span class="three-d-box">

                    <span class="front">angular</span>

                    <span class="back">angular</span>

                </span>

            </a>

        </li>

    </ul>

</header>

</body>

</html>

CSS

*{

    list-style: none;

    margin:;

    padding:;

}

.block-menu{

    background:#AA7A53;

    height:50px;

    overflow:hidden;

    padding-left:40px;

}

.block-menu li{

    float: left;

    margin-left: 15px;

}

.block-menu li a{

    color:#fff;

    text-decoration:none;

    text-transform:uppercase;

    font-size:16px;

    line-height:20px;

    font-weight:bold;

    font-family: Arial, sans-serif;

    display:block;

    padding:15px 10px;

}

.three-d-box,.front,.back{

    width: 100%;

    display: block;

    height:50px;

    position:absolute;

    top:;

    left:;

    text-align: center;

    line-height: 50px;

    background:#AA7A53;

}

.three-d{

    perspective:200px;

    position:relative;

}

.three-d-box{

    -webkit-transform-style:preserve-3d;

    transform-style:preserve-3d;

    -webkit-transform:translateZ(-25px);

    -moz-transform:translateZ(-25px);

    -o-transform:translateZ(-25px);

    -ms-transform:translateZ(-25px);

    transform:translateZ(-25px);

    -webkit-transition: all .3s ease-out;

    -moz-transition: all .3s ease-out;

    -o-transition: all .3s ease-out;

    transition: all .3s ease-out;

}

.front{

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

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

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

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

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

}

.back{

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

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

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

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

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

}

.three-d:hover .three-d-box{

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

}

css3之3d导航的更多相关文章

css3中做3D导航栏
看别人做的一个3D导航栏,觉得很厉害,这里先保存下来,后面有时间好好分析一下: <!doctype html> <html lang="en"> <h ...
【css】3d导航效果
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
CSS3制作旋转导航
慕课网学习CSS3时,遇到个习题,觉得有必要总结学习下:CSS3制作旋转导航慕课网习题地址:http://www.imooc.com/code/1883 示例及源码地址:http://codepen ...
纯CSS3实现动态导航栏目
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
网页特效：用CSS3制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
css3的3D和2D
css3的3D旋转:rorateX():参数为正值时,盒子是围绕x轴,完成从Y轴正方向到Y轴负方向的旋转,视觉上呈现高度上的变化.rorateY():参数为正值时,盒子是围绕Y轴,完成从X轴正方向到X ...
使用 CSS3 实现 3D 图片滑块效果【附源码下载】
使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...
CSS3之3D变换实例详解
CSS3的3D效果很赞,本文实现简单的两种3D翻转效果.首先看效果和源代码,文末是文绉绉的总结部分^_^ 以下CSS代码为了简洁没有添加前缀,请视情况自行添加(自动化时代推荐使用其他的一些方法,如gu ...
CSS3 transforms 3D翻开
R T L B <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

随机推荐

ReceiveQueue
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace NetF ...
关于javascript中限定时间内防止按钮重复点击的思路
前面的话有一天心血来潮,1分钟内重复点击了多次博客园首页的刷新博文列表的刷新按钮.果不其然,ip当时就被禁用了.后来,重启自己的路由器,重新获取ip才可以访问博客园主页.那么,设置一个限定时间内(比 ...
从零开始编写自己的C#框架（2）——开发前准备工作
没想到写了个前言就受到很多朋友的支持,大家的推荐就是我最大的动力(推荐得我热血沸腾,大家就用推荐来猛砸我吧O^-^O),谢谢大家支持. 其实框架开发大家都知道,不过要想写得通俗点,我个人觉得还是挺吃力 ...
windows server 注意windows的temp目录
windows解压缩包.安装软件时,会生成一些临时文件存放在temp目录中,windows不会自动删除这些文件. 临时文件目录可以在环境变量中查看和配置在工作机or个人PC机中中这个目录一般不会有什 ...
ASP.NET MVC Application_Error 无效不执行
我们一般在开发 ASP.NET MVC 应用程序的时候,会在 Application_Error 中添加异常日志记录,一般会记录 500 的错误信息,但如果应用程序在出错的时候,Application ...
输入URL到展现页面的全过程
最近在看一本关于网络协议的书<图解HTTP> 当我们在浏览器的地址栏输入 http://www.pwstrick.com ,然后回车,回车这一瞬间到看到页面到底发生了什么呢? 1. 域名 ...
objective-c 语法快速过（1）
有一定 c++或者 java 基础,过一遍 oc 语法即可,都是相通的,个人认为难点是 oc 的内存管理,虽然有了 ARC,但是也需要学习下,因为有旧软件的维护. 建立在C语言的基础上,增加了一层小范 ...
虚拟机利用Host-only实现在不插网线的情况下，虚拟机与主机实现双向通信，实现ssh连接以及samba服务实现共享
为了不影响其他的虚拟网卡,我们在VMware下在添加一块虚拟网卡: 然后点击Next,选择连接方式: 点击Finish即可. 重新启动虚拟机,如果这是你手动添加的第一块虚拟网卡,那么应该是eth1. ...
C++入门知识总结(1)
1.有符号数和无符号数. 这个问题其实是一个很细的问题,我们还要把问题追溯到“位”,针对不同的“位”,那么能表示的最大数的范围不同.因为计算机存储数据都是以二进制的方式去存储的,即0和1,比如 110 ...
12.Struts2自定义拦截器
12.自定义拦截器拦截器是Struts2的一个重要特性.因为Struts2的大多数核心功能都是通过拦截器实现的. 拦截器之所以称之为“拦截器”,是因为它可以拦截Action方法的执行, ...

css3之3d导航

css3之3d导航的更多相关文章

随机推荐

热门专题