html - 将 12 个图像排列成 12 小时制

Question

需要明确的是:我并不是想制作一个时钟，我只是想要每小时位置的 12 个图像

对，所以我想创建一个包含 12 个(圆形)图标的 div，每个图标的位置与 12 小时时钟相同，如下所示:

到目前为止，我正在玩，但没有得到很好的结果。到目前为止，我只尝试过“12”“3”“6”“9”位置，但它们无法正确居中，margin:auto 0;他们刚刚出发。

有没有更简单、更简洁的方法来做到这一点？

<强> FIDDLE

Answer 1

为了更轻松且不必定位每个图像，您可以在灰色背景中水平居中制作 12 个高度为 50% 的嵌套 div。然后，您需要将每个旋转 30 度(因为 360/12 = 30)。

由于 div 都是嵌套的，因此子 div 将比其父级多旋转 30 度，并自动定位在正确的位置:

<强> DEMO

.clock{
    position:relative;
    width:80%;
    padding-bottom:80%;
    margin:0 auto;
    background:lightgrey;
    overflow:hidden;
}

.clock div{
    height:100%;
    width:100%;
    
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
}
.clock > div{
    position:absolute;
    width:5%; height:50%;
    top:0; left: 47.5%;
}
.clock div img{
    position:absolute;
    top:0;left:0;
    width:100%; height:auto;    
}

<div class="clock">
    <div><img src="http://www.clker.com/cliparts/W/i/K/w/1/D/glossy-orange-circle-icon-hi.png"/>
        <div><img src="http://www.clker.com/cliparts/W/i/K/w/1/D/glossy-orange-circle-icon-hi.png"/>
            <div><img src="http://www.clker.com/cliparts/W/i/K/w/1/D/glossy-orange-circle-icon-hi.png"/>
                <div><img src="http://www.clker.com/cliparts/W/i/K/w/1/D/glossy-orange-circle-icon-hi.png"/>
                    <div><img src="http://www.clker.com/cliparts/W/i/K/w/1/D/glossy-orange-circle-icon-hi.png"/>
                        <div><img src="http://www.clker.com/cliparts/W/i/K/w/1/D/glossy-orange-circle-icon-hi.png"/>
                            <div><img src="http://www.clker.com/cliparts/W/i/K/w/1/D/glossy-orange-circle-icon-hi.png"/>
                                <div><img src="http://www.clker.com/cliparts/W/i/K/w/1/D/glossy-orange-circle-icon-hi.png"/>
                                    <div><img src="http://www.clker.com/cliparts/W/i/K/w/1/D/glossy-orange-circle-icon-hi.png"/>
                                        <div><img src="http://www.clker.com/cliparts/W/i/K/w/1/D/glossy-orange-circle-icon-hi.png"/>
                                            <div><img src="http://www.clker.com/cliparts/W/i/K/w/1/D/glossy-orange-circle-icon-hi.png"/>
                                                <div><img src="http://www.clker.com/cliparts/W/i/K/w/1/D/glossy-orange-circle-icon-hi.png"/></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>