<!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. 特种部队(codevs 1427)

    题目描述 Description 某特种部队接到一个任务,需要潜入一个仓库.该部队士兵分为两路,第一路士兵已经在正面牵制住了敌人,第二路士兵正在悄悄地从后方秘密潜入敌人的仓库.当他们到达仓库时候,发现 ...

  2. NOIP2013 提高组合集

    NOIP 2013 提高组 合集 D1 T1 转圈游戏 快速幂裸题 #include <iostream> #include <cstdio> #include <cst ...

  3. 《Linux内核分析》MOOC课程

    http://www.cnblogs.com/wickedpriest/p/4315189.html

  4. 关于OleDB连接Excel的Extended Properties(扩展属性)HDR=YES; IMEX=2个人理解心得

    近期在用C#写一个创建Excel并将数据导出到Excel的WinForm程序, 让我对OleDB连接Excel的Extended Properties(扩展属性)HDR=YES; IMEX=2有了深刻 ...

  5. 已知目标qps跟并发用户数20,压测平均响应时间实例

    Jmeter性能测试案例(一) 转:https://blog.csdn.net/lovesoo/article/details/78579547 测试需求:测试20个用户访问网站在负载达到30QPS时 ...

  6. WEB应用与站点的差别以及未来发展推測

    WEB应用与站点的差别 确切的说应该是网络应用(Web Application)与网络网站(Website)的差别. 之所以要弄清这两个的差别,对于网页设计师以及參与到互联网行业的职业,其方发展向有非 ...

  7. &lt;感悟帖&gt;互联网与电子传统行业之经历

    依据鄙人浅显的实习.毕业工作经验以及个人思考得此文. 鄙人有幸在BAT中的B实习,以及某电子行业科研机构工作,略有心得.总结例如以下.也算是对自己的一个交待和反省. 鄙人小硕毕业211学校非985,C ...

  8. FFmpeg滤镜使用指南

    文件夹 1. FFmpeg滤镜文档 2. 演示样例   2.1 缩放   2.2 视频加速   2.3 滤镜图,链和滤镜关系   2.4 多个输入覆盖同一个2x2 网格   2.5 转义字符   2. ...

  9. Wordpress的安装 for mac

    1.服务器环境要求 PHP 5.2.4或更新版本 MySQL 5.0或更新版本 Apache mod_rewrite模块(可选,用于支持“固定链接”和“站点网络”功能) 选择安装:XAMPP 2.XA ...

  10. WPF学习笔记:ComboBox的数据绑定

    UI <UserControl x:Class="UnitViews.UserMeUV" xmlns="http://schemas.microsoft.com/w ...