居中旋轉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的開始/停止行動？下面只是一個例子，你可以看到它是如何應用於你的目的的。

像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'); 
});