<!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. 循环效率对比 js node c# mssql

  2. static final的理解

    static: static静态,可以修饰类,成员变量,成员方法,代码块.static修饰的成员变量和方法独立于该类的任何对象,也就是被类的所有成员共享,这要这个类被加载,虚拟机就能根据类名在运行时数 ...

  3. Libsvm：脚本（subset.py、grid.py、checkdata.py） | MATLAB/OCTAVE interface | Python interface

    1.脚本 This directory includes some useful codes: 1. subset selection tools. (子集抽取工具) subset.py 2. par ...

  4. 有关Flash Player的内存管理及泄露检测

    1.Flash Player分配内存的策略是少量请求大内存块, 也就是不会频繁向系统请求内存. 2.Flash Player内存的回收是根据引用计数和标记清除(比较耗cpu)这两种方法. 3.从理论上 ...

  5. python中Url链接编码处理（urlencode,urldecode）

    做完了flask-web应用,这几天想用爬虫做个好玩的电影链接整合器,平时找电影都是在dytt或者dy2018之类的网站,在用dytt搜索电影<美国队长时>,发现他的搜索链接是这样的:ht ...

  6. iOS 10 消息推送（UserNotifications）秘籍总结（一）

    前言 之前说会单独整理消息通知的内容,但是因为工(就)作(是)的(很)事(懒)没有更新文章,违背了自己的学习的初衷.因为互联网一定要有危机意识,说不定眼一睁,我们就out丢了饭碗. 图片来源网络.jp ...

  7. node 日志管理log4js

    node 日志管理log4js 一.默认的控制台输出 我们使用express框架时,开发模式用node或者supervisor启动nodejs应用时,控制台都是显示如下的日志. GET /css/bo ...

  8. Hadoop集群中添加硬盘

    Hadoop工作节点扩展硬盘空间 接到老板任务,Hadoop集群中硬盘空间不够用,要求加一台机器到Hadoop集群,并且每台机器在原有基础上加一块2T硬盘,老板给力啊,哈哈. 这些我把完成这项任务的步 ...

  9. Understanding Virtual Memory

    Understanding Virtual Memory by Norm Murray and Neil Horman Introduction Definitions The Life of a P ...

  10. C char** 的一点儿理解

    理解是就是char** 相当于字符串数组,我以往纠结于该用 **arr还是*arr还是 (*arr),还是(**arr): 对于**arr而言:*arr代表数组的最开头,也就是第一个字串的内容.**a ...