div要素を回転させる
このステップでは、ページ上の12個のdiv要素を回転させて扇のようなエフェクトを作成する方法を学びます。
エディタで style.css
ファイルを開きます。
次のCSSルールをファイルに追加します。
#box:hover div:nth-child(6) {
transform: rotate(-10deg);
}
#box:hover div:nth-child(5) {
transform: rotate(-20deg);
}
#box:hover div:nth-child(4) {
transform: rotate(-30deg);
}
#box:hover div:nth-child(3) {
transform: rotate(-40deg);
}
#box:hover div:nth-child(2) {
transform: rotate(-50deg);
}
#box:hover div:nth-child(1) {
transform: rotate(-60deg);
}
#box:hover div:nth-child(7) {
transform: rotate(10deg);
}
#box:hover div:nth-child(8) {
transform: rotate(20deg);
}
#box:hover div:nth-child(9) {
transform: rotate(30deg);
}
#box:hover div:nth-child(10) {
transform: rotate(40deg);
}
#box:hover div:nth-child(11) {
transform: rotate(50deg);
}
#box:hover div:nth-child(12) {
transform: rotate(60deg);
}
これらのルールは、最初の6つのdiv要素(id="item1"~id="item6"
)を時計回りに回転させ、最小回転角度は10度で、隣接する要素間の差分は10度です。次の6つのdiv要素(id="item7"~id="item12"
)は、時計回りに回転させ、最小回転角度は10度で、隣接する要素間の差分は10度です。
style.css
ファイルを保存します。
ブラウザに戻り、ページを更新します。この時、要素にホバーしたときに扇のようなエフェクトが見られるはずです。