概述
純CSS實現蜂窩六邊形的個性相冊
詳細
此案例主要用到CSS3的 transform 和 transition屬性，還有nth-child() 選擇器
一、准備工作
1、主要運用到CSS3的3D transform變換
-
transform：向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜
| 值 | 描述 | 測試 |
|---|---|---|
| none | 定義不進行轉換。 | 測試 |
| matrix(n,n,n,n,n,n) | 定義 2D 轉換，使用六個值的矩陣。 | 測試 |
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定義 3D 轉換，使用 16 個值的 4x4 矩陣。 | |
| translate(x,y) | 定義 2D 轉換。 | 測試 |
| translate3d(x,y,z) | 定義 3D 轉換。 | |
| translateX(x) | 定義轉換，只是用 X 軸的值。 | 測試 |
| translateY(y) | 定義轉換，只是用 Y 軸的值。 | 測試 |
| translateZ(z) | 定義 3D 轉換，只是用 Z 軸的值。 | |
| scale(x,y) | 定義 2D 縮放轉換。 | 測試 |
| scale3d(x,y,z) | 定義 3D 縮放轉換。 | |
| scaleX(x) | 通過設置 X 軸的值來定義縮放轉換。 | 測試 |
| scaleY(y) | 通過設置 Y 軸的值來定義縮放轉換。 | 測試 |
| scaleZ(z) | 通過設置 Z 軸的值來定義 3D 縮放轉換。 | |
| rotate(angle) | 定義 2D 旋轉，在參數中規定角度。 | 測試 |
| rotate3d(x,y,z,angle) | 定義 3D 旋轉。 | |
| rotateX(angle) | 定義沿着 X 軸的 3D 旋轉。 | 測試 |
| rotateY(angle) | 定義沿着 Y 軸的 3D 旋轉。 | 測試 |
| rotateZ(angle) | 定義沿着 Z 軸的 3D 旋轉。 | 測試 |
| skew(x-angle,y-angle) | 定義沿着 X 和 Y 軸的 2D 傾斜轉換。 | 測試 |
| skewX(angle) | 定義沿着 X 軸的 2D 傾斜轉換。 | 測試 |
| skewY(angle) | 定義沿着 Y 軸的 2D 傾斜轉換。 | 測試 |
| perspective(n) | 為 3D 轉換元素定義透視視圖。 | 測試 |
2、transition 屬性
transition 屬性是一個簡寫屬性，用於設置四個過渡屬性：
-
transition-property
-
transition-duration
-
transition-timing-function
-
transition-delay
注釋：請始終設置 transition-duration 屬性，否則時長為 0，就不會產生過渡效果。
| 值 | 描述 |
|---|---|
| transition-property | 規定設置過渡效果的 CSS 屬性的名稱。 |
| transition-duration | 規定完成過渡效果需要多少秒或毫秒。 |
| transition-timing-function | 規定速度效果的速度曲線。 |
| transition-delay | 定義過渡效果何時開始。 |
3、nth-child() 選擇器
定義和用法
:nth-child(n) 選擇器匹配屬於其父元素的第 N 個子元素，不論元素的類型。
n 可以是數字、關鍵詞或公式。
提示：請參閱 :nth-of-type() 選擇器，該選擇器選取父元素的第 N 個指定類型的子元素。
二、程序實現
實現過程：
1、編寫HTML。
<li class="hex"> <a class="hexIn" href="#"> <img src="img/1.png" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a> </li>
<li class="hex"> <a class="hexIn" href="#"> <img src="img/2.png" alt="" />
<h1>This is a title</h1>
<p>Some sample text about the article this hexagon leads to</p>
</a> </li>
2、編寫六角形邊框和動畫效果的樣式類。
.hex * {
position: absolute;
visibility: visible;
outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
}
.hexIn:hover h1, .hexIn:focus h1,
.hexIn:hover p, .hexIn:focus p{
-webkit-transform:translateY(0%) translatez(-1px);
-ms-transform:translateY(0%) translatez(-1px);
transform:translateY(0%) translatez(-1px);
}
三、文件、運行截圖
1、文件截圖：
通過對每一個LI渲染成六角形，並實現自動嵌合式排列的效果，最終構成“蜂窩”；同時每個LI中含有A標簽，可通過CSS3實現鼠標滑過時顯示標題和說明文字的動畫特效。
2、運行效果圖：
打開index.html，可看到最終效果。（兼容IE9+,chrome,firefox,safari等主流瀏覽器）
