一、知识准备
css3属性:
二、开始动手
首先创建一个HTML结构,如下所示:
<div class="main">
<ul class="nav-menu">
<li><a href="#" class="three-d">技术研讨<span class="three-d-box">
<span class="front">技术研讨</span>
<span class="back">技术研讨</span></span>
/a></li>
</ul>
</div>
接下来更改基本的样式,先将<li>标签基本样式去掉,同时使<a>能自定义宽度、高度。
.nav-menu > li {
display: inline;
float: left;
}
.nav-menu li a {
color: #fff;
display: block;
text-decoration: none;
/*font-smoothing:使字体变清晰*/
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
line-height: 20px;
/*line-height:使字垂直居中*/
font-size: 20px;
padding: 15px 30px 15px 31px;
}
将下来我们就要创建3D效果了,选项就激动呢\(≧▽≦)/
平时浏览器渲染都是2D的,如果要程序3D效果,肯定要先创建一个3D舞台布景,让它在上面动起来
.three-d {
/* 设置3D舞台布景 */
/*perspective 属性定义 3D 元素距视图的距离,越大越远*/
-webkit-perspective: 200px;
-moz-perspective: 200px;
-ms-perspective: 200px;
-o-perspective: 200px;
perspective: 200px; /*设置3D舞台布景过渡效果*/
-webkit-transition: all .07s linear;
-moz-transition: all .07s linear;
-ms-transition: all .07s linear;
-o-transition: all .07s linear;
transition: all .07s linear;
position: relative;
}
有了舞台之后,表演什么呢?这就需要我们给它编排了\(^o^)/~
/*设置3D前,与3D后变形效果*/
.front {
-webkit-transform: rotatex(0deg) translatez(25px);
-moz-transform: rotatex(0deg) translatez(25px);
-ms-transform: rotatex(0deg) translatez(25px);
-o-transform: rotatex(0deg) translatez(25px);
transform: rotatex(0deg) translatez(25px);
}
.back {
-webkit-transform: rotatex(-90deg) translatez(25px);
-moz-transform: rotatex(-90deg) translatez(25px);
-ms-transform: rotatex(-90deg) translatez(25px);
-o-transform: rotatex(-90deg) translatez(25px);
transform: rotatex(-90deg) translatez(25px);
color: #FFE7C4;
}
.front, .back {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
padding: 15px 30px 15px 31px;
color: white;
-webkit-pointer-events: none;
-moz-pointer-events: none;
-ms-pointer-events: none;
-o-pointer-events: none;
pointer-events: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background: -webkit-linear-gradient(rgb(63, 184, 211), rgb(25, 137, 185), rgb(6, 91, 158));
background: -o-linear-gradient(rgb(63, 184, 211), rgb(25, 137, 185), rgb(6, 91, 158));
background: -moz-linear-gradient(rgb(63, 184, 211), rgb(25, 137, 185), rgb(6, 91, 158));
background: linear-gradient(rgb(63, 184, 211), rgb(25, 137, 185), rgb(6, 91, 158));
filter: alpha(opacity=80);
}
舞台准备好了,舞蹈也编排好了,但是好像还是缺了点什么?(⊙v⊙)嗯,对了,没有Music怎么行呢,有音乐才能跟着节拍起舞啊...
.three-d-box {
/*给3D舞台中“.three-d-box”设置过渡与变形效果*/
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
-webkit-transform: translatez(-25px);
-moz-transform: translatez(-25px);
-ms-transform: translatez(-25px);
-o-transform: translatez(-25px);
transform: translatez(-25px);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-pointer-events: none;
-moz-pointer-events: none;
-ms-pointer-events: none;
-o-pointer-events: none;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
}
更多参考:
http://codepen.io/ClayLing/pen/NpjxBg