1、立体汉字：旋转点left，attr(data-cont)可获取自定义属性值，skewY（倾斜转换）参考地址

2、旋转导航：先移动后旋转，li标签需要延迟执行旋转

注意：:hover事件触发自己的:afert伪元素事件中间是没有空格的

<!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案例（立体导航）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

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

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

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

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

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

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

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

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

  6. 超给力的HTML5 3D动画欣赏及源码下载

    HTML5有着非常巨大的魅力,尤其是CSS3和Cavnas,可以帮助页面渲染得非常炫酷.值得一提的是,利用HTML5的3D特性可以帮助你更加方便地在网页上实现3D动画特效.本文分享的这些HTML5 3 ...

  7. CSS3特效----制作3D旋转导航

    大致思路:首先给 three-d-box 设置一个 transition是不可少的 然后每个 a 标签里面有两个 span 一个叫 font 一个叫 back,默认状态下 font 旋转0度,也就是没 ...

  8. 强大！HTML5 3D美女图片旋转实现教程

    又到周末,来弄点HTML5的特效玩玩,今天要折腾的是HTML5 3D图片特效,图片在垂直方向上被分割成一条条小矩形,在图片上拖动鼠标即可让每一个小矩形旋转,从而让图片形成3D立体的效果,来看看效果图: ...

  9. CSS3制作旋转导航

    慕课网学习CSS3时,遇到个习题,觉得有必要总结学习下:CSS3制作旋转导航 慕课网习题地址:http://www.imooc.com/code/1883 示例及源码地址:http://codepen ...

随机推荐

  1. Spring的发展【一】

    1.1. Spring1.x 时代 在Spring1.x时代,都是通过xml文件配置bean,随着项目的不断扩大,需要将xml配置分放到不同的配置文件中,需要频繁的在java类和xml配置文件中切换. ...

  2. 实例：Mongodb集群配置过程

    最近因为一些项目公司开始采用Mongodb做为大量的数据存储,通过网络上大量的资源自己已经掌握一套可行的Mongodb集群配置过程,Mongodb具有无规则存储.大数据存储.多平台支持.强大的扩展插件 ...

  3. maven 本地配置

    1.安装 配置环境变量 文件路径:C:\Program Files\apache-maven-3.3.9 2.本地文件配置 setting的配置 找到文件C:\Program Files\apache ...

  4. AbstractList 重写 equals() 方法

    题目内容 题目内容很简单,就是创建 ArrayList 和 Vector 集合,向两者添加相同内容的字符串,最后用 equals() 方法比较是否相等. 这里就考察了 "==" 和 ...

  5. Ubuntu 16.04安装Chrome浏览器

    一.先有一个hosts能访问Google 参考:http://www.cnblogs.com/EasonJim/p/5999060.html 二.安装方法有两种,如下所示: 1.下载deb包(推荐) ...

  6. U4687 不无聊的序列

    U4687 不无聊的序列 0通过 85提交 题目提供者飞翔 标签 难度尚无评定 提交 最新讨论 暂时没有讨论 题目背景 如果一个序列的任意一个连续的子序列中没有只出现一次的元素,辣么kkk就认为这个序 ...

  7. 对数据html文本 的处理

    对数据html文本 的处理  : 提取文字.图片.分句 ''' SELECT * FROM Info_Roles WHERE Flag=1 LIMIT 2; select top y * from 表 ...

  8. Ubuntu 16.04 安装CodeBlocks

    首先将软件源添加进来,就是运行以下命令 sudo add-apt-repository ppa:damien-moore/codeblocks-stable sudo apt-get update 完 ...

  9. ALSA声卡驱动中的DAPM详解之四：在驱动程序中初始化并注册widget和route

    前几篇文章我们从dapm的数据结构入手,了解了代表音频控件的widget,代表连接路径的route以及用于连接两个widget的path.之前都是一些概念的讲解以及对数据结构中各个字段的说明,从本章开 ...

  10. bzoj2131: 免费的馅饼

    首先我们很容易看出是一个DP 然后容易看出是数据结构优化DP 但是这个限制条件有点鬼畜: abs(p[i]-p[j])/2<=(t[i]-t[j]) p[i]>p[j] -> t[i ...