<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

</head>

<style type="text/css">

	.nav{

		width: 980px;

		margin: 50px auto;

		background-color: #fdfdfd;

		border: 1px #ccc solid;

	}

	.nav:after{

		clear: both;

		display: block;

		overflow: hidden;

		content: "";

	}

	.nav .item{

		width:200px;

		height: 100px;

		margin-right: 5px;

		float: left;

		perspective:400px;

	}

	.nav .item a{

		display: block;

		height: 100px;

		text-decoration: none;

		transition:all .5s;

		transform-style:preserve-3d;

	}

	.nav .item a p{

		height: 100px;

		margin:0;

		line-height: 100px;

		color: #fff;

		text-align:center;

		font-size: 20px;

		font-family: "Microsoft Yahei";

		border-radius: 2px;

		transition:all .5s;

	}

	.nav .item a p:first-child{

		background-color: #090;

		transform:translateZ(50px);

	}

	.nav .item a p:last-child{

		background-color: #009;

		/*这样会向结果方向走50px像素*/

		transform:translateZ(50px) rotateX(-90deg) ;

		/*margin-top: -50px;*/

	}

	/*立体旋转是按面在转*/

	.nav .item a:hover{

		transform:rotateX(90deg);

	}

	/*这东西是基于正常位置，而不是动画的位置如（transform:translateZ(50px) rotateX(-90deg) ;）*/

	.nav .item a:hover p:last-child{

		margin-top: 0;

		transform: translateZ(0) rotateX(-90deg);

	}

</style>

<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 & A</p>

			</a>

		</div>

		<div class="item">

			<a href="#">

				<p>关于我们</p>

				<p>About us</p>

			</a>

		</div>

	</header>

</body>

</html>

　　之前一直想不通，如下为什么旋转到上面后要再旋转-90deg。

	/*这东西是基于正常位置，而不是动画的位置如（transform:translateZ(50px) rotateX(-90deg) ;）*/

	.nav .item a:hover p:last-child{

		margin-top: 0;

		transform: translateZ(0) rotateX(-90deg);

	}

 另外rotateX（-90deg）是上边缘向屏幕外旋转，也就是顺时针。反之。

CSS 3D旋转 hover 后设置transform 是相对于正常位置的更多相关文章

  1. css 3d旋转

  2. CSS：列表样式（设置列表项的标志图案/位置）

    通过CSS 列表属性能够放置.改变列表项标志.或者将图像作为列表项标志. 代码整理自w3school:http://www.w3school.com.cn 效果图: watermark/2/text/ ...

  3. CSS实现回到顶部图片hover后改变效果

    任何网站中回到顶部元素不可缺少,一般为了实现交互效果,都会在鼠标hover后元素样式有所改变.今天这个实例便是采用CSS中的transform知识实现. hover: <!DOCTYPE htm ...

  4. 纯CSS做3D旋转魔方

    昨天偶然看见网友(简单说 用CSS做一个魔方旋转的效果)做的一个3D旋转魔方  效果就是本博客右侧公告栏所示 在这里把做法展现出来 感兴趣的可以试试  做成自己特有的魔方 <!DOCTYPE h ...

  5. 纯CSS炫酷的3D旋转

    <html><head><meta charset="utf-8"><title>纯CSS炫酷的3D旋转</title> ...

  6. 纯CSS炫酷3D旋转立方体进度条特效

    在网站制作中,提高用户体验度是一项非常重要的任务.一个创意设计不但能吸引用户的眼球,还能大大的提高用户的体验.在这篇文章中,我们将大胆的将前面所学的3D立方体和进度条结合起来,制作一款纯CSS3的3D ...

  7. CSS3 transform 属性(2D,3D旋转)

    一.语法 div{ transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg) ...

  8. CSS3——3D旋转图（跑马灯效果图）

    CSS3新增了很多新的属性,可以用很少的代码实现炫酷的动画效果,但由于兼容性各浏览器的能力存在不足,有特别需求的网站就呵呵啦.H5C3已是大势所趋了,之前看过一个新闻,Chrome将在年底全面转向H5 ...

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

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

随机推荐

  1. commonJS — 通用方法（for COM）

    for COM github: https://github.com/laixiangran/commonJS/blob/master/src/forCOM.js 代码 /** * Created b ...

  2. Rocketmq-尝试理解

    普通的信息发送和消费 首先要启动nameserver和broker,nameserver是一个几乎无状态节点.broker分为master和slave,master和slave的对应关系通过指定相同的 ...

  3. JSON和php里的数据序列化

    JSON就是一种数据结构,独立于语言 {"1":"one","2":"two","3":" ...

  4. xUtils更新到3.0后的基本使用规则

    说实话,对于xUtils,是我最近才用到的开发框架(也是刚接触),对于其功能不得不说,简化了很多的开发步骤,可以说是非常好的开发工具,但是其最近更新到3.0也没有解决加载自定义ImageView报错的 ...

  5. Windows下快捷键

    1.任务管理器ctrl+alt+delete 2.切换任务窗口alt+tab 3.命令行Win+R 命令: {打开任务管理器:taskmgr} {打开远程桌面连接:mstsc} 4.回到桌面Win+D ...

  6. 张艾迪(创始人）：DCM的不识人.我说我会像乔布斯一样成为投资者的骄傲

      Eidyzhang解码:天才Eidyzhang的诞生 张艾迪(创始人):第一个实习生精英团队 张艾迪(创始人):DCM的不识人.我说我会像乔布斯一样成为投资者的骄傲 2014-05-31 09:4 ...

  7. 开源牛人 zcbenz

    事情是这样的,微软推出了Visual Studio Code,我很好奇他怎么做跨平台的,所以就找找资料,在他的网站中是这么描述的: Architecturally, Visual Studio Cod ...

  8. WebDataTree 使用XML做数据源绑定数据

    英文版原文链接:http://www.infragistics.com/help/topic/e5f07b51-ee2d-4a33-aaac-2f43cffff327 所使用的控件版本为:Infrag ...

  9. C++中颜色的设置

    1.改变整个控制台的颜色用 system("color 0A"); 其中color后面的0是背景色代号,A是前景色代号.各颜色代码如下: 0=黑色 1=蓝色 2=绿色 3=湖蓝色  ...

  10. Spring MVC Controller中解析GET方式的中文参数会乱码的问题(tomcat如何解码)

    Spring MVC Controller中解析GET方式的中文参数会乱码的问题 问题描述 在工作上使用突然出现从get获取中文参数乱码(新装机器,tomcat重新下载和配置),查了半天终于找到解决办 ...