<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        body {

            text-align: center;

            background-color: #EBE6E6;

        }

        /*汉字*/

        .characters {

            margin-top: 150px;

        }

        .characters > span {

            display: inline-block;

            width: 80px;

            height: 80px;

            font: 500 60px/80px "Microsoft YaHei";

            text-align: center;

            position: relative;

            transform-style: preserve-3d;

        }

        .characters > span::before, .characters > span::after {

            content: attr(data-cont);

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            color: white;

            transform-origin: left;

            transform: scale(0.96, 1);

            transition: all 1s;

        }

        .characters > span::before {

            color: #ccc;

        }

        .characters:hover span::after {

            transform: rotateY(-35deg);

        }

        .characters:hover span::before {

            /*倾斜*/

            transform: rotateY(-15deg) skewY(15deg);

        }

        /*导航*/

        .nav {

            width: 420px;

            height: 30px;

            margin: 50px auto;

            transform-origin: bottom;

        }

        ul {

            list-style: none;

        }

        li {

            float: left;

            transform-style: preserve-3d;

            position: relative;

            width: 60px;

            height: 30px;

            transform: rotateX(0deg);

            transition: all 0.8s;

        }

        li > span {

            position: absolute;

            width: 100%;

            height: 100%;

            top: 0;

            left: 0;

            text-align: center;

            font: 400 15px/30px "Microsoft YaHei";

        }

        li > span:nth-child(1) {

            background-color: green;

            transform: translateZ(15px);

        }

        li > span:nth-child(2) {

            background-color: yellow;

            transform: translateY(-15px) rotateX(90deg);

        }

        .nav:hover li {

            transform: rotateX(-90deg);

        }

        li:nth-child(2) {

            transition-delay: 0.1s;

        }

        li:nth-child(3) {

            transition-delay: 0.2s;

        }

        li:nth-child(4) {

            transition-delay: 0.3s;

        }

        li:nth-child(5) {

            transition-delay: 0.4s;

        }

        li:nth-child(6) {

            transition-delay: 0.6s;

        }

        li:nth-child(7) {

            transition-delay: 0.8s;

        }

    </style>

</head>

<body>

<div class="characters">

    <span data-cont="安">安</span>

    <span data-cont="徽">徽</span>

    <span data-cont="省">省</span>

    <span data-cont="图">图</span>

    <span data-cont="书">书</span>

    <span data-cont="馆">馆</span>

</div>

<div class="nav">

    <ul>

        <li>

            <span>第一</span>

            <span>第二</span>

        </li>

        <li>

            <span>第一</span>

            <span>第二</span>

        </li>

        <li>

            <span>第一</span>

            <span>第二</span>

        </li>

        <li>

            <span>第一</span>

            <span>第二</span>

        </li>

        <li>

            <span>第一</span>

            <span>第二</span>

        </li>

        <li>

            <span>第一</span>

            <span>第二</span>

        </li>

        <li>

            <span>第一</span>

            <span>第二</span>

        </li>

    </ul>

</div>

</body>

</html>

html5——3D案例（立体导航）的更多相关文章

  1. html5——3D案例（立体汉字，旋转导航）

    1.立体汉字:旋转点left,attr(data-cont)可获取自定义属性值,skewY(倾斜转换)参考地址 2.旋转导航:先移动后旋转,li标签需要延迟执行旋转 注意::hover事件触发自己的: ...

  2. 3D案例，导航，导航升级版

    /*****************************百度钱包旋转变内容******************************/ <!DOCTYPE html> <htm ...

  3. html5——3D案例（立方体）

    立方体:父盒子规定了3d呈现属性,立方体做旋转运动 移动顺序:1.每个盒子都先移动100px,然后再做相应的旋转  2.只有这样立方体的几何中心点与父盒子的几何中心点是一样的 <!DOCTYPE ...

  4. html5——3D案例（音乐盒子、百度钱包）

    1.音乐盒子:触碰盒子,盖子会打开 2.百度钱包:触碰钱包,钱包,会180度旋转 <!DOCTYPE html> <html lang="en"> < ...

  5. 8个经典HTML5 3D动画赏析

    HTML5技术已经越来越被我们所接受,特别是一些3D的动画特效.本文介绍的8个HTML5 3D动画并没有特别华丽的界面,但是比较实用,涉及到3D图片.3D图表.3D按钮等方面,一起来看看. 1.HTM ...

  6. HTML5 3D动画效果

    对以前来讲,3D动画拿到网页上展示是一件非常奢侈的事情,第一是浏览器不够先进,第二是大部分只能用flash实现伪3D.HTML5的出现,让实现网页3D动画变得非常简单,当然前提是你不要再使用像IE67 ...

  7. 9个超绚丽的HTML5 3D图片动画特效

    在Web 1.0时代,我们的网页中图片数量非常少,而且都是以静态图片为主.HTML5的出现,推动了Web 2.0的发展,同时也催生出了很多绚丽的HTML5图片动画特效,特别是有些还有3D的动画效果.本 ...

  8. 7款超酷HTML5 3D动画精选应用及源码

    对以前来讲,3D动画拿到网页上展示是一件非常奢侈的事情,第一是浏览器不够先进,第二是大部分只能用flash实现伪3D.HTML5的出现,让实现网页3D动画变得非常简单,当然前提是你不要再使用像IE67 ...

  9. 8款效果惊艳的HTML5 3D动画

    1.HTML5 WebGL水面水波荡漾特效 之前已经向各位分享过一款很逼真的HTML5水波荡漾特效,效果还算不错.今天再向大家分享一款更加给力的HTML5水波动画,画面上是一个大水池,水池底部是一颗大 ...

随机推荐

  1. kafka 在阿里云部署

    https://blog.csdn.net/chenyulancn/article/details/79499401 https://www.cnblogs.com/yangtianle/p/8761 ...

  2. 最小生成树+BFS J - Borg Maze

    The Borg is an immensely powerful race of enhanced humanoids from the delta quadrant of the galaxy. ...

  3. 在IIS6,7中部署ASP.NET网站[转]

    阅读目录 开始 查看web.config文件 在IIS中创建网站 IIS6 添加扩展名映射 IIS6 无扩展名的映射 目录的写入权限 SQL SERVER的配置 在IIS7中部署ASP.NET程序 8 ...

  4. js的jsonp

    window.ajaxJsonp=function(params) { params = params || {}; params.data = params.data || {}; var json ...

  5. 使用jcaptcha插件生成验证码

    1.从官网http://jcaptcha.sourceforge.net/下载插件.将对应jar包导入到lib文件夹下 2.创建一个CaptchaServiceSingleton类用来获取jcaptc ...

  6. hdu 4549 M斐波那契数列（矩阵高速幂，高速幂降幂）

    http://acm.hdu.edu.cn/showproblem.php?pid=4549 f[0] = a^1*b^0%p,f[1] = a^0*b^1%p,f[2] = a^1*b^1%p... ...

  7. php 把一个数组分成有n个元素的二维数组的算法

    一.第一种解法 <?php //把一个数组分成几个数组 //$arr 是数组 //$num 是数组的个数 function partition($arr,$num){ //数组的个数 $list ...

  8. SOA究竟是个啥

    SOA(Service-Oriented Architecture),中文全称:面向服务的架构. SOA让把系统分离成不同的服务,使用接口来进行数据交互,终于达到整合系统的目的. 专业的词总是让人懵懵 ...

  9. 【转】Intent传递数据时，可以传递哪些类型数据？

    在Android应用的开发中,如果我们需要在不同的模块(比如不同的Activity之间)之间传递数据,通常有以下两种方法:1. 利用Intent对象携带数据通过查询Intent/Bundle的API文 ...

  10. 移植linux3.7到nuc900系列开发板遇到的问题

    通过移植学习linux新版本内核,大概了解一下内核变化. 记录一下移植过程中遇到的问题或值得注意的地方. 1,添加一款arm9芯片的支持 首先修改\arch\arm\tools\mach-types文 ...