旋转 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
文件。
返回浏览器并刷新页面。现在,当你将鼠标悬停在该元素上时,应该会看到类似风扇的效果。