CSS3实现导航菜单的3D翻转动画效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D反转动画的的实现</title>
<style type="text/css">
.nav{
width: 980px;
height: 100px;
margin: 50px auto;
background-color: #fdfdfd;
border: 1px #ccc solid;
}
/*为nav清除浮动*/
.nav：after{
clear: both;
display: block;
overflow: hidden;
content: "";
}
.nav .item{
width: 200px;
height: 100px;
margin-right: 5px;
float: left;
perspective: 4000px;
}
.nav .item a{
display: block;
height: 100px;
text-decoration: none;
transition: all .5s;
transform-style: preserve-3d;
}
.nav .item a p{
height: 100px;
margin: 0px;
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;
transform: translateZ(50px) rotateX(-90deg) ;
margin-top: -50px;
}
.
nav .item a:hover{
transform: rotateX(90deg);
}
.nav .item a:hover p:last-child{
margin-top: 0px;导航菜单
transform: translateZ(0) rotateX(-90deg);
}
</style>
</style>
</head>
<body>
<!--
3D透视属性
transform-style:flat|preserve-3d        (flat平⾯)
-->
<!--
W3C标准中对CSS3的transition这是样描述的:“CSS的transition允许CSS的属性值在⼀定的时间区间内平滑地过渡。
这种效果可以在⿏标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”            transition主要包含四个属性值：
transition-property:  执⾏变换的属性;
transition- duration: 变换延续的时间;
transition-timing-function：在延续时间段，变换的速率变化;
transition- delay：变换延迟时间;
-->
<!--
transform的含义是：改变，使…变形；转换.
transform的属性包括：rotate() / skew() / scale() / translate().
分别还有x、y之分,⽐如：rotateX() 和 rotateY()
transform:rotate();
含义：旋转；其中“deg”是“度”的意思，如“10deg”表⽰“10度”下同.
transform:skew()；含义：倾斜；
transform:scale();
含义：⽐例；“1.5”表⽰以1.5的⽐例放⼤，如果要放⼤2倍，须写成“2.0”，缩⼩则为负“-”.
transform:translate();
含义：变动，位移；如下表⽰向右位移120像素，如果向上位移，把后⾯的“0”改个值就⾏。
横着的是X轴，竖着的是Y轴
-->
<!--
perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
当为元素定义 perspective 属性时，其⼦元素会获得透视效果，⽽不是元素本⾝。
注释：perspective 属性只影响 3D 转换元素。
-->
<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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。