<!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. Structs1 -配置例子（转）

    转自:(http://blog.csdn.net/xys_777/article/details/7542095) Action, ActionForm, ActionForward ,这三个对象构成 ...

  2. 美国半个互联网瘫痪对开发者使用DNS的启发

    版权声明:本文由腾讯云DNSPod团队原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/174 来源:腾云阁 https:// ...

  3. 20145218 《Java程序设计》第03次实验报告

    北京电子科技学院(BESTI)实验报告 课程:Java程序设计 班级:1452 指导教师:娄嘉鹏 实验日期:2016.04.22 实验名称:敏捷开发与XP实践 一.实验内容 XP基础 XP核心实践 相 ...

  4. eclipse导入git项目（转）

    1.首先在github.com上申请一个账号2.Eclipse需要安装egit插件,在Eclipse中选择help->Marketplace,在search中输入egit,找到后安装即可 3.从 ...

  5. Qt之QRadioButton

    简述 QRadioButton部件提供了一个带有文本标签的单选框(单选按钮). QRadioButton是一个可以切换选中(checked)或未选中(unchecked)状态的选项按钮.单选框通常呈现 ...

  6. VS2010中将当前选定项目做为启动项

    Visual Studio 2010一个解决方案中多个项目,如果想选择哪个项目就设置哪个项目为启动项可以这么做. 一.对于以后新建的解决方案想这样通过VS设置工具: 二.对于已经存在的解决方案可以这样 ...

  7. 你不知道的JavaScript--面向对象高级程序设计

    转载http://blog.csdn.net/i10630226/article/details/51088841 1. JS是基于原型的程序 建立一个简单的面向对象的类.有属性,有方法. funct ...

  8. iOS视频直播初窥:高仿<喵播APP>

    视频直播初窥 视频直播,可以分为 采集,前处理,编码,传输, 服务器处理,解码,渲染 采集: iOS系统因为软硬件种类不多, 硬件适配性比较好, 所以比较简单. 而Android端市面上机型众多, 要 ...

  9. 必须关注的25位知名JavaScript开发者

    必须关注的25位知名JavaScript开发者 发表于2012-08-07 17:30| 16215次阅读| 来源Crossrider Blog| 46 条评论| 作者Crossrider Blog ...

  10. GO工程和包

    转载:http://blog.csdn.net/achelloworld/article/details/43956831 在Go语言中,包是函数与数据的集合,用package定义一个包,包的名字不一 ...