transform-style:flat | preserve-3d；

3d透视属性。针对子元素如何在3d空间相对其父元素渲染，这个属性声明在父元素上，并且他的子元素使用了transform才会有效。有两个属性值，一个是flat平面，这也是默认值；一个是preserve-3d当子元素使用transform时，保留其3d的位置也就是3d透视。本示例3d菜单翻转动画中，使用了transform的3d变形属性，包括旋转和移动。当鼠标移入该菜单，该元素做3d翻转动画；鼠标离开后，还原至初始状态

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>CSS3实现3d菜单翻转</title>
  6.     <style type="text/css">
  7.         .nav{
  8.             width: 980px;
  9.             margin: 50px auto;
  10.             background-color: #fdfdfd;
  11.             border: 1px #cccccc solid;
  12.         }
  13.         .nav:after{
  14.             /*本段css主要是解决header标签中的子元素因为浮动而未将header高度撑起来的问题*/
  15.             clear: both;
  16.             display: block;
  17.             overflow: hidden;
  18.             content: "";
  19.         }
  20.         .nav .item{
  21.             width: 200px;
  22.             height: 100px;
  23.             float: left;
  24.             border-right: 5px #333333 solid;
  25.             /*3d元素距离视图的距离，当元素设置perspective时，它的子元素会获得一个透视的效果，而不是元素的本身
  26.             其实就是z轴的距离，从屏幕到屏幕里面的距离*/
  27.             -webkit-perspective: 4000px;
  28.             -moz-perspective: 4000px;perspective: 4000px;
  29.         }
  30.         .nav .item:last-child{
  31.             border-right: none;
  32.         }
  33.         .nav .item a{
  34.             display: block;
  35.             height: 100px;
  36.             /*去掉超链接默认的下边线*/
  37.             text-decoration: none;
  38.             -webkit-transition: all .5s;
  39.             -moz-transition: all .5s;
  40.             -ms-transition: all .5s;
  41.             -o-transition: all .5s;
  42.             transition: all .5s;
  43.             -webkit-transform-style: preserve-3d;
  44.             -moz-transform-style: preserve-3d;
  45.             -ms-transform-style: preserve-3d;
  46.             transform-style: preserve-3d;
  47.         }
  48.         .nav .item a p{
  49.             height: 100px;
  50.             margin:;
  51.             /*设置行高，设置文字距上距下的高，包括文字的高度。这里与height同高，即垂直方向居中*/
  52.             line-height: 100px;
  53.             color: #ffffff;
  54.             text-align: center;
  55.             font-size: 20px;
  56.             font-famiy: "Microsoft Yahei";
  57.             -webkit-border-radius: 2px;
  58.             -moz-border-radius: 2px;
  59.             border-radius: 2px;
  60.             -webkit-transition: all .5s;
  61.             -moz-transition: all .5s;
  62.             -ms-transition: all .5s;
  63.             -o-transition: all .5s;
  64.             transition: all .5s;
  65.         }
  66.         .nav .item a p:first-child{
  67.             background-color: #009900;
  68.             -webkit-transform: translateZ(50px);
  69.             -moz-transform: translateZ(50px);
  70.             -ms-transform: translateZ(50px);
  71.             -o-transform: translateZ(50px);
  72.             transform: translateZ(50px);
  73.         }
  74.         .nav .item a p:last-child{
  75.             background-color: #000099;
  76.             -webkit-transform: translateZ(50px) rotateX(-90deg);
  77.             -moz-transform: translateZ(50px) rotateX(-90deg);
  78.             -ms-transform: translateZ(50px) rotateX(-90deg);
  79.             -o-transform: translateZ(50px) rotateX(-90deg);
  80.             transform: translateZ(50px) rotateX(-90deg);
  81.             margin-top: -50px;
  82.         }
  83.         .nav .item a:hover{
  84.             -webkit-transform: rotateX(90deg);
  85.             -moz-transform: rotateX(90deg);
  86.             -ms-transform: rotateX(90deg);
  87.             -o-transform: rotateX(90deg);
  88.             transform: rotateX(90deg);
  89.         }
  90.         .nav .item a:hover p:last-child{
  91.             margin-top:;
  92.             -webkit-transform: translateZ(0) rotateX(-90deg);
  93.             -moz-transform: translateZ(0) rotateX(-90deg);
  94.             -ms-transform: translateZ(0) rotateX(-90deg);
  95.             -o-transform: translateZ(0) rotateX(-90deg);
  96.             transform: translateZ(0) rotateX(-90deg);
  97.         }
  98.     </style>
  99. </head>
  100. <body>
  101.     <header class="nav">
  102.         <div class="item">
  103.             <a href="#">
  104.                 <p>首页</p>
  105.                 <p>Home</p>
  106.             </a>
  107.         </div>
  108.         <div class="item">
  109.             <a href="#">
  110.                 <p>问答</p>
  111.                 <p>Q &amp A</p>
  112.             </a>
  113.         </div>
  114.         <div class="item">
  115.             <a href="#">
  116.                 <p>关于我们</p>
  117.                 <p>About us</p>
  118.             </a>
  119.         </div>
  120.     </header>
  121. </body>
  122. </html>

CSS3实现3d菜单翻转的更多相关文章

  1. css3实现3D立体翻转效果

    1.在IE下无法显示翻转效果,火狐和谷歌可以 /*样式css*/ .nav-menu li { display: inline; } .nav-menu li a { color: #fff; dis ...

  2. CSS3 3D立方体翻转菜单实现教程

    今天我们来看一个非常有创意的CSS3 3D菜单,这个菜单的菜单项是可以旋转的长方体,鼠标滑过是长方体即可旋转,看看下面的效果图,是不是感觉非常酷,我觉得这个菜单很适合用在咱们开发人员的个人网站上. 当 ...

  3. css3实现酷炫的3D盒子翻转效果

    简介 运用css3先在平面空间组成立方体盒子,再让整个盒子翻转起来,先来张效果图: 步骤 1.先用css将6张图片摆成下图的样子: 下面就是通过css3的3D变换将每个面进行翻转,使之成为一个立体的盒 ...

  4. 一款非常棒的纯CSS3 3D菜单演示及制作教程

    原文:一款非常棒的纯CSS3 3D菜单演示及制作教程 这段时间比较忙,很久没在这里分享一些漂亮的HTML5和CSS3资源了,今天起的早,看到一款很不错的CSS3 3D菜单,觉得非常上眼,就将它分享给大 ...

  5. 基于CSS3飘带状3D菜单 菜单带小图标

    这次我们要来分享一款很特别的CSS3菜单,菜单的外观是飘带状的,并且每一个菜单项有一个精美的小图标,鼠标滑过菜单项时,菜单项就会向上凸起,像是飘带飘动一样,形成非常酷的3D视觉效果.这款CSS3飘带状 ...

  6. css3的3D和2D

    css3的3D旋转:rorateX():参数为正值时,盒子是围绕x轴,完成从Y轴正方向到Y轴负方向的旋转,视觉上呈现高度上的变化.rorateY():参数为正值时,盒子是围绕Y轴,完成从X轴正方向到X ...

  7. 24个 HTML5 & CSS3 下拉菜单效果及制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  8. CSS3之3D变换实例详解

    CSS3的3D效果很赞,本文实现简单的两种3D翻转效果.首先看效果和源代码,文末是文绉绉的总结部分^_^ 以下CSS代码为了简洁没有添加前缀,请视情况自行添加(自动化时代推荐使用其他的一些方法,如gu ...

  9. css3实现色子自动翻转效果

    原文:css3实现色子自动翻转效果 css3使我们能够跳出2d空间,实现3维空间的动画效果,这里给出一个自动翻转的3d色子动画效果制作过程. 第一步,首先进行HTML的布局,对于3D效果,布局有一定的 ...

随机推荐

  1. html嵌套关系

    哪些元素可以出现在什么地方,哪一个元素可以被包涵在另一个元素里面,这个都是有规则的 1.块级元素可以包涵行内元素   2.块级元素不一定包涵块级元素 p包涵div是不合法的,在浏览器里面会自动在p里面 ...

  2. HDU 5025 Saving Tang Monk 【状态压缩BFS】

    任意门:http://acm.hdu.edu.cn/showproblem.php?pid=5025 Saving Tang Monk Time Limit: 2000/1000 MS (Java/O ...

  3. 2018中国大学生程序设计竞赛 - 网络选拔赛 4 - Find Integer 【费马大定理+构造勾股数】

    Find Integer Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Tota ...

  4. 2018.9.28 典型for循环特殊理解及其二维数组的理解

    如果for里面换成了函数结果会是怎么样呢?下面就来介绍一下 package praDemo; public class Test { public static boolean foo(char c) ...

  5. 如何使用MiniProfiler（附最新版MiniProfiler使用心得）

    MiniProfiler这个工具早就久仰大名,不过之前一直没有动力去用,正好最近手上有个ASP.NET MVC的项目,正好拿来试试手,下面是使用最新的4.0.138版本的心得体会以及踩到一些小坑的解决 ...

  6. Android学习笔记_JNI_c调用java代码

    1.编写native方法(java2c)和非native方法(c2java): package com.example.provider; public class CallbackJava { // ...

  7. JDBC连接数据库时错误提示的解决方案汇总

    今天在连接JDBC时,出现了错误 最开始的URL是这样写的 Connection conn = DriverManager.getConnection("jdbc:mysql://local ...

  8. LinkedList---链表各种方法的实现

    public class ListExer2 { public static void main(String[] args) { LinkList list = new LinkList(); li ...

  9. the “inner class” idiom

    有些时候我们需要upcast为多种类型,这种情况下除了可以使用multiply inherits还可以inner class. 以下为例子: //: C10:InnerClassIdiom.cpp / ...

  10. Qt学习交流（广告）

    最近全面学习QT与c++,希望同行能够指教,于是打算建个群QQ群:85439482,欢迎大家,本群主要专注于QT皮肤库积累,软件架构以及标准c++学习.