<!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. Linux命令行下编译Android NDK的示例代码

    这几天琢磨写一个Android的Runtime用来加速HTML5 Canvas,让GameBuilder+CanTK 不但开发速度快,运行速度也能接近原生应用.所以花了点时间研究 Android ND ...

  2. Java线程(二)：线程同步synchronized和volatile

    上篇通过一个简单的例子说明了线程安全与不安全,在例子中不安全的情况下输出的结果恰好是逐个递增的(其实是巧合,多运行几次,会产生不同的输出结果),为什么会产生这样的结果呢,因为建立的Count对象是线程 ...

  3. poj-------(2240)Arbitrage(最短路)

    Arbitrage Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 15640   Accepted: 6563 Descri ...

  4. DB、ETL、DW、OLAP、DM、BI关系结构图

    DB.ETL.DW.OLAP.DM.BI关系结构图 在此大概用口水话简单叙述一下他们几个概念: (1)DB/Database/数据库——这里一般指的就是OLTP数据库,在线事物数据库,用来支持生产的, ...

  5. 求平均排序MATLAB code

    A0=R(:,1:2:end); for i=1:17 A1=A0(i,:); p=sort(unique(A1)); for j=1:length(p) Rank0(A1==p(j))=j; end ...

  6. 从java 转到 c# 知识点

    1. 重写的父类方法 必须是虚方法 用virtual 关键字修饰 而子类必须用 ovrride 关键字 java中不需要,, 2. namespace => packet using => ...

  7. Mysql执行Update操作时会锁住表

    update tableA a,(select a.netbar_id,sum(a.reward_amt) reward_amt from tableB a group by a.netbar_id) ...

  8. c#获取系统时间的方法（转）

      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 ...

  9. 使用BroadcastReceiver监听系统接收的短信

    import android.content.BroadcastReceiver;import android.content.Context;import android.content.Inten ...

  10. jquery返回上一页面

    window.location.href=document.referrer;   返回然后刷新 window.history.back(-1);  返回不刷新