transform-style:flat | preserve-3d;

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3实现3d菜单翻转</title>
<style type="text/css">
.nav{
width: 980px;
margin: 50px auto;
background-color: #fdfdfd;
border: 1px #cccccc solid;
}
.nav:after{
/*本段css主要是解决header标签中的子元素因为浮动而未将header高度撑起来的问题*/
clear: both;
display: block;
overflow: hidden;
content: "";
}
.nav .item{
width: 200px;
height: 100px;
float: left;
border-right: 5px #333333 solid;
/*3d元素距离视图的距离,当元素设置perspective时,它的子元素会获得一个透视的效果,而不是元素的本身
其实就是z轴的距离,从屏幕到屏幕里面的距离*/
-webkit-perspective: 4000px;
-moz-perspective: 4000px;perspective: 4000px;
}
.nav .item:last-child{
border-right: none;
}
.nav .item a{
display: block;
height: 100px;
/*去掉超链接默认的下边线*/
text-decoration: none;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.nav .item a p{
height: 100px;
margin:;
/*设置行高,设置文字距上距下的高,包括文字的高度。这里与height同高,即垂直方向居中*/
line-height: 100px;
color: #ffffff;
text-align: center;
font-size: 20px;
font-famiy: "Microsoft Yahei";
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.nav .item a p:first-child{
background-color: #009900;
-webkit-transform: translateZ(50px);
-moz-transform: translateZ(50px);
-ms-transform: translateZ(50px);
-o-transform: translateZ(50px);
transform: translateZ(50px);
}
.nav .item a p:last-child{
background-color: #000099;
-webkit-transform: translateZ(50px) rotateX(-90deg);
-moz-transform: translateZ(50px) rotateX(-90deg);
-ms-transform: translateZ(50px) rotateX(-90deg);
-o-transform: translateZ(50px) rotateX(-90deg);
transform: translateZ(50px) rotateX(-90deg);
margin-top: -50px;
}
.nav .item a:hover{
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
-o-transform: rotateX(90deg);
transform: rotateX(90deg);
}
.nav .item a:hover p:last-child{
margin-top:;
-webkit-transform: translateZ(0) rotateX(-90deg);
-moz-transform: translateZ(0) rotateX(-90deg);
-ms-transform: translateZ(0) rotateX(-90deg);
-o-transform: translateZ(0) rotateX(-90deg);
transform: translateZ(0) rotateX(-90deg);
}
</style>
</head>
<body>
<header class="nav">
<div class="item">
<a href="#">
<p>首页</p>
<p>Home</p>
</a>
</div>
<div class="item">
<a href="#">
<p>问答</p>
<p>Q &amp A</p>
</a>
</div>
<div class="item">
<a href="#">
<p>关于我们</p>
<p>About us</p>
</a>
</div>
</header>
</body>
</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. The Tao to Excellent 2

    就算自己现在的技术水平很菜,就算自己现在写的代码还是很烂,但我们还是要一直坚持在最前线,一直向上,也许,在前方,就有不一样的风景在等着我们. 因为我深深明白到一件事:人之所以选择混吃等死,是因为他们根 ...

  2. JVM原理:4 运行期优化

    JVM运行期优化 Java程序在运行的期间,可能会有某个方法或者代码块的运行特别频繁时,就会把这些代码认定为“热点代码”.为了提高热点代码的执行效率,在运行时JVM会将这些代码编译成与本地平台相关的机 ...

  3. LA 4731 蜂窝网络

    题目链接:https://vjudge.net/problem/UVALive-4731 题意: n 个 数,分成 w 组,求整个区间的数学期望的最小值: 一个区间的数学期望公式给出:一个区间的和 * ...

  4. HDU 1757 A Simple Math Problem 【矩阵经典7 构造矩阵递推式】

    任意门:http://acm.hdu.edu.cn/showproblem.php?pid=1757 A Simple Math Problem Time Limit: 3000/1000 MS (J ...

  5. ABP问题记录

    按照<Asp.NET Core2.0与 EF的ABP框架入门视频教程>(https://ke.qq.com/course/287301)下载了3.9版本的ABP,开始学习,下面记录遇到的问 ...

  6. 原生ajax接收json字符串(简单介绍)

    什么是json? JSON的全称是 Javascript Object Notation(javascript对象表示法),是基于javascript对象字面量,如果单从眼睛看,JSON里的数据是被保 ...

  7. generative models

    A generative model G can be seen as taking a random seed h (say, a sample from a multivariate Normal ...

  8. ajax请求相关问题

    Ajax中async:false/true的作用: async. 默认是 true,即为异步方式,$.ajax执行后,会继续执行ajax后面的脚本,直到服务器端返回数据后,触发$.ajax里的succ ...

  9. 如何关闭Eclipse智障的变量命名自动补全功能

    找到了最最完美的解决方案,无需下载源码. 详见:https://zhidao.baidu.com/question/1451659429285222820.html

  10. AndroidMVP

    Mvp模式简介 衍生于MVC 模式,降低了耦合性,避免了View(Activity/Fragment)承担了所有的责任, 分担了UI层的职责. 在MVP模式里通常包含4个要素: * View:负责绘制 ...