在12小时的时钟形成中放置12张图像

Question

为了清楚起见：我不想制作时钟，我只想在每小时的位置拍摄12张图像

是的，所以我想创建一个包含12个（圆圈）图标的div，每个图标与12小时时钟位于同一位置，如下所示：

到目前为止，我一直在玩，并没有得到一个非常好的结果。我只尝试过＆＃34; 12＆＃34; ＆＃34; 3＆＃34; ＆＃34; 6＆＃34; ＆＃34; 9＆＃34;到目前为止的位置，但他们不能正确地居中，margin:auto 0;他们只是关闭。

有更简单，更简洁的方法吗？

FIDDLE

Answer 1

为了使其更容易而不必定位每个图像，您可以制作12个嵌套的div，其高度为50％，在灰色背景中居中。然后你需要将每个旋转30度（因为360/12 = 30）。

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

<强> DEMO

＆＃13;

＆＃13;

.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;    
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;