<!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. java 集合4（迭代器）

    迭代器使用要注意的问题: 1.迭代器在遍历元素的时候注意事项: 在迭代器迭代元素的过程中,不准使用集合对象改变集合中的元素个数, 如果要添加或删除要用迭代器的方法. 2.如果使用类集合对象改变集合中的 ...

  2. Git 分支管理是一门艺术

    转载: Git 分支管理是一门艺术 1 要确保:团队成员从主分支(master)获得的都是处于可发布状态的代码,而从开发分支(develop)应该总能够获得最新开发进展的代码. 2 "辅助分 ...

  3. 【CITE】DrawImage方法详解(转)

    Image和Bitmap类概述 GDI+的Image类封装了对BMP.GIF.JPEG.PNG.TIFF.WMF(Windows元文件)和EMF(增强WMF)图像文件的调入.格式转换以及简单处理的功能 ...

  4. 34-Ajax辅助方法

    Ajax是Asynchronous JavaScript and XML的缩写,是目前非常热门的网页开发技术之一,利用Ajax开发技术可以帮助网站减少切换页面的机会.加快网页响应速度.降低网络下载流量 ...

  5. Python安装BeautifulSoup库（Windows平台下）

    简介 参照官网Beautiful Soup4.4.0文档:https://www.crummy.com/software/BeautifulSoup/bs4/doc/ 安装步骤 1.到https:// ...

  6. 《javascript高级程序设计》第六章 Object Creation VS Inheritance

    6.1 理解对象 6.1.1 属性类型 6.1.2 定义多个属性 6.1.3 读取属性的特性6.2 创建对象 6.2.1 工厂模式 6.2.2 构造函数模式 6.2.3 原型模式 6.2.4 组合使用 ...

  7. 你不知道的JavaScript--DOM基础详解2

    转载:http://blog.csdn.net/i10630226/article/details/49785165 先上几张图简要看看DOM的一些方法属性: 大概这些就是常用的,下面具体聊聊. 节点 ...

  8. HTML：表格与表单

    一.图片热点:规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

  9. J2EE开发实战基础系列一 HelloWorld【转】

      开始咱们的第一个程序,首先是配置环境,按照上一章所描述的方式下载开发工具,然后配置Java环境变量,给大家看下具体的结构: 环境变量配置OK的提示,如上图. Eclipse和Tomcat的文件目录 ...

  10. XAML-1

    1.XAML Extension Application Marked Language,是WPF技术中专门用来设计UI的语言.XAML是从XML派生出来的,是一种声明式语言,当你看到一个标签,就是声 ...