将旋转的 Div 居中

Question

我正在处理一个孩子在父母中的轮换。父级的宽度和高度是固定的，而子级的宽度和高度是动态的。

让我们说，

Child width - Cw
Child height - Ch
Parent width - Pw
Parent height - Ph


When `Cw > Pw && Ch < Ph` then expected: `left=0 and vertically centered`
When `Cw < Pw && Ch > Ph` then expected: `top=0 and horizontally centered`
When `Cw > Pw && Ch > Ph` then expected: `left=0 and top=0`
When `Cw < Pw && Ch < Ph` then expected: `vertically and horizontally centered`

小提琴 - http://jsfiddle.net/Xja29/1/

最近几天我尝试了很多。我正在做的小提琴之一就是在这里。以防你不相信 - http://jsfiddle.net/zgvEC/50/

Answer 1

您是否考虑过以稍微不同的方式处理这个问题并使用 CSS 进行旋转，并使用 jQuery 进行启动/停止操作？以下只是一个 shell 示例，供您了解如何将其应用于您的目的。

点赞this fiddle

CSS

div{
    display:inline-block;
}
.parent{
    border:1px solid grey;
}
.child{
    height:100px;
    width:100px;
    border-radius:9px;
    background:blue;
    margin:10px;
}

.rotate {
    -webkit-animation:rotate 4s linear infinite;
    -moz-animation:rotate 4s linear infinite;
    animation:rotate 4s linear infinite;
}
@-moz-keyframes rotate { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg); } }
@keyframes rotate { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

HTML

<div class='parent'>
    <div class='child'>
    </div>    
</div>
<a id='rotate' href='#'>Rotate</a>

jQuery

$('#rotate').click(function(){
   $('.child').addClass('rotate');
});