一、知識準備
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