CSS 3D旋转 hover 后设置transform 是相对于正常位置
<!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 是相对于正常位置的更多相关文章
- css 3d旋转
- CSS：列表样式（设置列表项的标志图案/位置）
通过CSS 列表属性能够放置.改变列表项标志.或者将图像作为列表项标志. 代码整理自w3school:http://www.w3school.com.cn 效果图: watermark/2/text/ ...
- CSS实现回到顶部图片hover后改变效果
任何网站中回到顶部元素不可缺少,一般为了实现交互效果,都会在鼠标hover后元素样式有所改变.今天这个实例便是采用CSS中的transform知识实现. hover: <!DOCTYPE htm ...
- 纯CSS做3D旋转魔方
昨天偶然看见网友(简单说 用CSS做一个魔方旋转的效果)做的一个3D旋转魔方 效果就是本博客右侧公告栏所示 在这里把做法展现出来 感兴趣的可以试试 做成自己特有的魔方 <!DOCTYPE h ...
- 纯CSS炫酷的3D旋转
<html><head><meta charset="utf-8"><title>纯CSS炫酷的3D旋转</title> ...
- 纯CSS炫酷3D旋转立方体进度条特效
在网站制作中,提高用户体验度是一项非常重要的任务.一个创意设计不但能吸引用户的眼球,还能大大的提高用户的体验.在这篇文章中,我们将大胆的将前面所学的3D立方体和进度条结合起来,制作一款纯CSS3的3D ...
- CSS3 transform 属性(2D,3D旋转)
一.语法 div{ transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg) ...
- CSS3——3D旋转图（跑马灯效果图）
CSS3新增了很多新的属性,可以用很少的代码实现炫酷的动画效果,但由于兼容性各浏览器的能力存在不足,有特别需求的网站就呵呵啦.H5C3已是大势所趋了,之前看过一个新闻,Chrome将在年底全面转向H5 ...
- CSS3特效----制作3D旋转导航
大致思路:首先给 three-d-box 设置一个 transition是不可少的 然后每个 a 标签里面有两个 span 一个叫 font 一个叫 back,默认状态下 font 旋转0度,也就是没 ...
随机推荐
- js文字上下滚动代码
<div id="dome"> <div id="dome1"> <ul class="express"> ...
- python 练习 2
#!/usr/bin/python # -*- coding: utf-8 -*- from random import shuffle class caigame: win=False flag=F ...
- js键盘操作事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- --专访雷果国： 从1.5K到18K 一个程序员的5年成长之路--
导语:今年三月份,在CSDN博客和新浪微博上有一篇<从1.5K到18K,一个程序员的5年成长之路>被众人分享和传阅,这篇博文首先介绍了作者自学之初薄弱的基础,然后通过流水账形式分享了那个从 ...
- Hibernate4+Spring JPA+SpringMVC+Volecity搭建web应用(一)
pom.xml配置 <dependencies> <!-- hibernate begin --> <dependency> <groupId>org. ...
- c语言详解sizeof
一.sizeof的概念 sizeof是C语言的一种单目操作符,如C语言的其他操作符++.--等. 它并不是函数. sizeof操作符以字节形式给出了其操作数的存储大小. 操 ...
- 【新手练习】类似Path的按钮,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- SecureCRT从本传相片到服务器的注意事项
rz -y -be 注意,要加上参数be
- POC测试——原型验证，降低风险，IT系统销售工作之一
POC测试,即Proof of Concept,是业界流行的针对客户具体应用的验证性测试,根据用户对采用系统提出的性能要求和扩展需求的指标,在选用服务器上进行真实数据的运行,对承载用户数据量和运行时间 ...
- jQuery滚动条回到顶部或指定位置
jQuery滚动条回到顶部或指定位置 在很多网站,为了增强用户体验,我们会看到回到顶部的按钮,不用手动拖拽滚动条就能回到顶部,非常方便.下面就介绍用jquery实现的滚动到顶部的代码 $(functi ...