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度,也就是没 ...
随机推荐
- java 集合4(迭代器)
迭代器使用要注意的问题: 1.迭代器在遍历元素的时候注意事项: 在迭代器迭代元素的过程中,不准使用集合对象改变集合中的元素个数, 如果要添加或删除要用迭代器的方法. 2.如果使用类集合对象改变集合中的 ...
- Git 分支管理是一门艺术
转载: Git 分支管理是一门艺术 1 要确保:团队成员从主分支(master)获得的都是处于可发布状态的代码,而从开发分支(develop)应该总能够获得最新开发进展的代码. 2 "辅助分 ...
- 【CITE】DrawImage方法详解(转)
Image和Bitmap类概述 GDI+的Image类封装了对BMP.GIF.JPEG.PNG.TIFF.WMF(Windows元文件)和EMF(增强WMF)图像文件的调入.格式转换以及简单处理的功能 ...
- 34-Ajax辅助方法
Ajax是Asynchronous JavaScript and XML的缩写,是目前非常热门的网页开发技术之一,利用Ajax开发技术可以帮助网站减少切换页面的机会.加快网页响应速度.降低网络下载流量 ...
- Python安装BeautifulSoup库(Windows平台下)
简介 参照官网Beautiful Soup4.4.0文档:https://www.crummy.com/software/BeautifulSoup/bs4/doc/ 安装步骤 1.到https:// ...
- 《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 组合使用 ...
- 你不知道的JavaScript--DOM基础详解2
转载:http://blog.csdn.net/i10630226/article/details/49785165 先上几张图简要看看DOM的一些方法属性: 大概这些就是常用的,下面具体聊聊. 节点 ...
- HTML:表格与表单
一.图片热点:规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
- J2EE开发实战基础系列一 HelloWorld【转】
开始咱们的第一个程序,首先是配置环境,按照上一章所描述的方式下载开发工具,然后配置Java环境变量,给大家看下具体的结构: 环境变量配置OK的提示,如上图. Eclipse和Tomcat的文件目录 ...
- XAML-1
1.XAML Extension Application Marked Language,是WPF技术中专门用来设计UI的语言.XAML是从XML派生出来的,是一种声明式语言,当你看到一个标签,就是声 ...