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度,也就是没 ...
随机推荐
- clip API实现遮罩
(function () { var img; var canvas = document.getElementById("canvas"); var con = canvas.g ...
- 倒计时原生js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery上传插件Jquery.uploadify.js-转
Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也可以点击下面的链接进行演示 ...
- 给文本标签UILabel添加长按复制功能
http://www.111cn.net/sj/iOS/104236.htm http://blog.csdn.net/lrenjun/article/details/12582927 自定义一个可复 ...
- 网页html结构右侧栏固定，左侧自适应大小。
最近写了一个项目,写页面的结构,html树形结构是有header,container,footer部分,其中container部分是右侧栏是固定宽度,左侧是自适应宽度与屏幕高度. 第一次写的博客文章是 ...
- JavaScript第一部分
一.JavaScript简介 1.JavaScript是个什么东西? 它是个脚本语言,需要有宿主文件,它的宿主文件是HTML文件. 2.它与Java什么关系? 没有什么直接的联系,Java是Sun公司 ...
- ios基础篇（四）——UILabel的常用属性及方法
UILabel的常用属性及方法:1.text //设置和读取文本内容,默认为nil label.text = @”文本信息”; //设置内容 NSLog(@”%@”, label.text); //读 ...
- pycharm 导包
如果需要requests包,python没有自带.可以执行命令:pip install requests,自动安装导入.
- BZOJ2721 [Violet 5]樱花
先令n! = a: 1 / x + 1 / y = 1 / a => x = y * a / (y - a) 再令 k = y - a: 于是x = a + a ^ 2 / k => ...
- 开源项目导入eclipse的一般步骤[转]
下载到开源项目后,我们还是希望导入到eclipse中还看,这样要方便点,一般的步骤是这样的 打开源代码目录, 如果看到里面有.calsspath .project文件,那么说明这个项目本来就是ec ...