<！DOCTYPE html>
<html lang = "en">
<ヘッド>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width = device-width、initial-scale = 1.0">
<title>ハニカム</ title>
<スタイル>
.boxFw {
幅：800px;
マージン：0自動;
パディング：0;
}
.boxFw> li {
幅：130px;
高さ：74px;
背景色：＃2722226b;
float：左;
リストスタイルタイプ：なし。
マージン：40px 10px;
位置：相対;
ディスプレイ：フレックス;
align-items：center;
justify-content：center;
}
img {
幅：40％;
高さ：70％;
マージン：0自動;
ディスプレイ：フレックス;
border-radius：60％;
z-index：1;
border：2px solid #ccc;
}
.boxFw> li :: before {
コンテンツ： '';
幅：130px;
高さ：74px;
位置：絶対;
上：0px;
左：0px;
背景色：＃3e35358f;
変換：回転（60度）;
}
.boxFw> li :: after {
コンテンツ： '';
幅：130px;
高さ：74px;
位置：絶対;
上：0px;
左：0px;
背景色：＃3e35358f;
変換：回転（120度）;
-webkit-transform：rotate（120deg）;
}
.active {
変換：回転（360度）スケール（1.2）;
遷移：1秒;
-webkit-transition：1s;
-o-transition：1s;
}
.activewremove {
変換：rotate（0deg）scale（1）;
遷移：1秒;
-webkit-transition：1s;
-o-transition：1s;
}
</ style>
</ head>
<ボディ>
<ul class = 'boxFw'>
<li> <img src = "./ img / 1.jpg" alt = ""> </ li>
<li> <img src = "./ img / 2.jpg" alt = ""> </ li>
<li> <img src = "./ img / 3.jpg" alt = ""> </ li>
<li> <img src = "./ img / 4.jpg" alt = ""> </ li>
<li> <img src = "./ img / 5.jpg" alt = ""> </ li>
<li style = "margin-left：85px;"> <img src = "./ img / 6.jpg" alt = ""> </ li>
<li> <img src = "./ img / 7.jpg" alt = ""> </ li>
<li> <img src = "./ img / 8.jpg" alt = ""> </ li>
<li> <img src = "./ img / 9.jpg" alt = ""> </ li>
<li> <img src = "./ img / 10.jpg" alt = ""> </ li>
<li> <img src = "./ img / 11.jpg" alt = ""> </ li>
<li> <img src = "./ img / 12.jpg" alt = ""> </ li>
<li> <img src = "./ img / 13.jpg" alt = ""> </ li>
<li> <img src = "./ img / 14.jpg" alt = ""> </ li>
</ ul>
</ body>
<スクリプト>
var eleme = document.getElementsByTagName（ "img"）
for（var i = 0; i <eleme.length; i ++）{
eleme [i] .onmouseover = function（）{
this.classList.add（ "active"）
this.classList.remove（ "activewremove"）
};
eleme [i] .onmouseout = function（）{
this.classList.add（ "activewremove"）
this.classList.remove（ "active"）
};
}
</ script>
</ html>