问题:
如何将多个图像对齐成一个圆圈,同时保持其可点击性功能?
答案:
2024 解决方案:
此解决方案提供了更现代的方法:
原始解决方案:
在包装器中定位每个图像:
定义具有所需旋转角度的类并应用变换链:
HTML 和 CSS 代码片段:
<div class="circle-container"> <a href="#" class="center"></a> <a href="#" class="deg0"></a> <a href="#" class="deg45"></a> <a href="#" class="deg135"></a> <a href="#" class="deg180"></a> <a href="#" class="deg225"></a> <a href="#" class="deg315"></a> </div>
.circle-container { width: 24em; height: 24em; position: relative; } .circle-container a { position: absolute; top: 50%; left: 50%; width: 4em; height: 4em; margin: -2em; } .deg0 { transform: translate(12em); } .deg45 { transform: rotate(45deg) translate(12em) rotate(-45deg); }
以上是如何将可点击的图像排列成圆形?的详细内容。更多信息请关注PHP中文网其他相关文章!