/*****************************百度钱包旋转变内容******************************/

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>百度钱包旋转变内容</title>
  6.         <style>
  7.             .wallet{
  8.                 width: 300px;
  9.                 height:300px ;
  10.                 margin: 50px auto;
  11.                 position: relative;
  12.  
  13.                 transition: all 8s;
  14.  
  15.                 transform-style:preserve-3d;   /* 加了之后父盒子就真正3D*/
  16.             }
  17.             .wallet::before, .wallet::after{
  18.                 content: '';
  19.                 display: block;
  20.                 position: absolute;
  21.                 left:0;
  22.                 top:0;
  23.                 width:100%;
  24.                 height:100%;
  25.                 /*right:0;
  26.                 bottom:0;*/
  27.                 background: red;
  28.             }
  29.             .wallet::before{
  30.                 background: #33ffca;        /*可更换为图片*/
  31.                 transform: translateZ(-5px);
  32.                 /*子元素必须是转换元素，eg两个平面必须要有距离，才起作用transform-style:preserve-3d;*/
  33.             }
  34.             .wallet::after{
  35.                 background: #3598db;        /*可更换为图片*/
  36.                 transform: translateZ(5px);  /*可以更改两个平面Z距离*/
  37.             }
  38.             .wallet:hover{
  39.                 transform: rotateY(180deg);        /*顺时针180*/
  40.             }
  41.         </style>
  42.     </head>
  43.     <body>
  44.     <div class="wallet">
  45.     </div>
  46.     </body>
  47.  
  48. </html>

/*****************************3D导航******************************/

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>3D导航</title>
  6.         <style>
  7.             body{
  8.                 margin: 0;
  9.                 padding:0;
  10.                 font-family: "Agency FB";
  11.                 background: #f7f7f7;
  12.             }
  13.             .nav{
  14.                 height:40px;
  15.                 margin-top: 50px;
  16.                 text-align: center;
  17.                 list-style: none;
  18.             }
  19.             li{
  20.                 width:120px ;
  21.                 height: 40px;
  22.                 line-height: 40px;
  23.                 float: left;
  24.  
  25.                 position: relative;
  26.  
  27.                 -webkit-transition: all 1s;
  28.  
  29.                 transform-style:preserve-3d;   /*加了之后父盒子就真正3D*/
  30.             }
  31.             li span{
  32.                 position: absolute;
  33.                 top:0;
  34.                 left: 0;
  35.                 width:100%;
  36.                 height:100%;
  37.             }
  38.             li span:first-child{
  39.                 background: yellow;
  40.                 transform:rotateX(90deg) translateZ(20px);
  41.             }
  42.             li span:last-child{
  43.                 background: #3598db;
  44.                 transform: translateZ(20px);
  45.             }
  46.             li:hover{
  47.                 transform: rotateX(-90deg);   /*旋转整个标签*/
  48.             }
  49.         </style>
  50.     </head>
  51.     <body>
  52.         <ul class="nav">
  53.             <li>
  54.                 <span>3D样式导航</span>
  55.                 <span>轻轻走143</span>
  56.             </li>
  57.             <li>
  58.                 <span>3D样式导航</span>
  59.                 <span>轻轻走143</span>
  60.             </li>
  61.             <li>
  62.                 <span>3D样式导航</span>
  63.                 <span>轻轻走143</span>
  64.             </li>
  65.             <li>
  66.                 <span>3D样式导航</span>
  67.                 <span>轻轻走143</span>
  68.             </li>
  69.             <li>
  70.                 <span>3D样式导航</span>
  71.                 <span>轻轻走143</span>
  72.             </li>
  73.         </ul>
  74.     </body>
  75.  
  76. </html>

/*****************************3D导航升级->3D轮播图******************************/

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>3D导航升级->3D轮播图</title>
  6.         <style>
  7.             body{
  8.                 margin: 0;
  9.                 padding:0;
  10.                 font-family:"微软雅黑";
  11.                 background: #f7f7f7;
  12.             }
  13.             .nav{
  14.                 height:40px;
  15.                 margin-top: 50px;
  16.                 text-align: center;
  17.                 list-style: none;
  18.             }
  19.             li{
  20.                 width:120px ;
  21.                 height: 40px;
  22.                 line-height: 40px;
  23.                 float: left;
  24.  
  25.                 position: relative;
  26.  
  27.                 -webkit-transition: all 1s;
  28.  
  29.                 transform-style:preserve-3d;   /*加了之后父盒子就真正3D*/
  30.             }
  31.             li span{
  32.                 position: absolute;
  33.                 top:0;
  34.                 left: 0;
  35.                 width:100%;
  36.                 height:100%;
  37.             }
  38.             li span:first-child{
  39.                 background: yellow;
  40.                 transform:rotateX(90deg) translateZ(20px);
  41.             }
  42.             li span:last-child{
  43.                 background: #3598db;
  44.                 transform: translateZ(20px);
  45.             }
  46.  
  47.             /*旋转整个li标签*/
  48.             /*li:hover{
  49.                 transform: rotateX(-90deg);
  50.             }*/
  51.  
  52.             /*旋转整个ul标签*/
  53.             /*类似3D轮播图*/
  54.             .nav:hover li{
  55.                 transform: rotateX(-90deg);
  56.             }
  57.             .nav li:nth-child(1){
  58.                 transition-delay: 0s;   /*延迟0s*/
  59.             }
  60.             .nav li:nth-child(1){
  61.                 transition-delay: 0.2s;   /*延迟0s*/
  62.             }
  63.             .nav li:nth-child(2){
  64.                 transition-delay: 0.4s;   /*延迟0s*/
  65.             }
  66.             .nav li:nth-child(3){
  67.                 transition-delay: 0.6s;   /*延迟0s*/
  68.             }
  69.             .nav li:nth-child(4){
  70.                  transition-delay: 0.8s;   /*延迟0s*/
  71.              }
  72.             .nav li:nth-child(5){
  73.                   transition-delay: 1s;   /*延迟0s*/
  74.               }
  75.  
  76.         </style>
  77.     </head>
  78.     <body>
  79.         <ul class="nav">
  80.             <li>
  81.                 <span>3D样式导航</span>
  82.                 <span>轻轻走143</span>
  83.             </li>
  84.             <li>
  85.                 <span>3D样式导航</span>
  86.                 <span>轻轻走143</span>
  87.             </li>
  88.             <li>
  89.                 <span>3D样式导航</span>
  90.                 <span>轻轻走143</span>
  91.             </li>
  92.             <li>
  93.                 <span>3D样式导航</span>
  94.                 <span>轻轻走143</span>
  95.             </li>
  96.             <li>
  97.                 <span>3D样式导航</span>
  98.                 <span>轻轻走143</span>
  99.             </li>
  100.         </ul>
  101.     </body>
  102.  
  103. </html>

【作者】：轻轻走143
【出处】：http://www.cnblogs.com/qingqingzou-143/
【声明】：所有博文标题后加（share）的表示收集的他人优秀文章，其余的则为原创。欢迎转载，但请在显要位置显示本文链接，并保留本段声明，否则追究法律责任，谢谢！

3D案例，导航，导航升级版的更多相关文章

  1. 3D立体菜单导航

    今天在微博里面看到别人分享的一个立体效果,我觉得挺好的,就拿下来自己存着,万一以后用到. 效果如下: index.html <!DOCTYPE html> <html > &l ...

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

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

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

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

  4. 【iOS开发-76】Private Contacts案例：导航控制器使用、数据传递、第三方类库使用、tableViewCell的加入删除、数据存储等

    (1)效果 (2)源码与第三方类库下载 http://download.csdn.net/detail/wsb200514/8155979 (3)总结 --导航控制器,能够直接用代码的push和pop ...

  5. jQuery实际案例④——360导航图片效果

    如图:①首先使用弹性盒子布局display:flex; flex-wrap:wrap; ②鼠标移上去出现“百度一下,你就知道了”,这句话之前带上各个网站的logo:③logo使用的是sprite,需要 ...

  6. 18. vue-router案例-tabBar导航

    目标: 做一个导航tabbar 一. 分析 我们的目标是做一个导航tabbar, 要求 这个导航不仅可以在一个页面使用, 可以在多个页面通用 每个页面的样式可能不一样 每个页面的图标, 文字可能不一样 ...

  7. 2019.4.24 3D效果滚筒导航练习

    效果图: 彩千圣天下第一!(小声bb) 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...

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

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

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

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

随机推荐

  1. C#解压、压缩RAR文件

    using System; using System.Collections.Generic; using System.Text; using System.IO; using Microsoft. ...

  2. uva 1298 - Triathlon

    半平面交的题: 这个题目的亮点就是建模: #include<cstdio> #include<algorithm> #include<cmath> #define ...

  3. 【Uva 12558】 Egyptian Fractions (HARD version) （迭代加深搜，IDA*）

    IDA* 就是iterative deepening(迭代深搜)+A*(启发式搜索) 启发式搜索就是设计估价函数进行的搜索(可以减很多枝哦~) 这题... 理论上可以回溯,但是解答树非常恐怖,深度没有 ...

  4. Foundation和UIKit框架图

    学习Foundation和UIKit的时候比较容易忽视的一个问题: 对于一个新的类,知道它的用法和属性方法,但往往忽视了它的继承关系, 了解类的继承关系能帮助加深对其理解. 另外在官方文档中每一个类的 ...

  5. Hausdorff距离

    Hausdorff距离是描述两组点集之间相似程度的一种量度,它是两个点集之间距离的一种定义形式:假设有两组集合A={a1,…,ap},B={b1,…,bq},则这两个点集合之间的Hausdorff距离 ...

  6. Qt Add ons Modules（听说QtSystem有接口可以获取 imei号）

    http://wiki.qt.io/Qt-Add-ons-Modules 听说QtSystem有接口可以获取 imei号.http://wiki.qt.io/Qt-Add-ons-Modules这儿下 ...

  7. 140. Word Break II

    题目: Given a string s and a dictionary of words dict, add spaces in s to construct a sentence where e ...

  8. java web路径的问题

    对于<form action="/xx"> 和 <a href='/xx'> 其中,xx相应的为网站根目录 一般网站为虚拟目录,所以要 写成   /web应 ...

  9. Styles and Themens(5)样式文件Style.xml中各元素的含义

    Style Resource See also Styles and Themes A style resource defines the format and look for a UI. A s ...

  10. rebuild过程

    /** The class defining a handle to an Innodb table */ class ha_innobase: public handler { row_prebui ...