如何讓DIV更大，因爲它旋轉（CSS3動畫）

Question

我想旋轉我的div當我懸停在它和它自旋我想讓它更大的像放大]。

到目前爲止，我有這個：

[HTML]

div class="myMsg"> 
<p id="welly" style="color: #009">Welcome to Y3!<br><br><br>Thanks for stopping by!</p> 
</div> 

[CSS]

.myMsg { 
background: white; 
width: 800px; 
height : 500px; 
margin: 100px auto; 
border: 1px solid black; 
opactiy: 0.5; 
-webkit-transform: rotate(360deg); /* Safari and Chrome */ 
-webkit-transform: scale(.1,.1) skew(45deg) translateX(-300px); 
box-shadow: 0px 0px 200px grey; 
} 

.myMsg:hover { 
    opacity: 1; 
    -webkit-transform: rotate(360deg); /* Safari and Chrome */ 
    -webkit-transform: scale(1,.1 skew(0deg); 
box-shadow: 0px 0px 200px grey; 
} 

，所以我希望它擴展到常規尺寸前紡

任何幫助理解

Answer 1

First, to show that it can be done。

既然這樣，讓我們​​回到本質並告訴你如何去做。

首先，您需要使用animation來爲屬性設置動畫效果並獲取旋轉效果。可悲的是，一個過渡將是不夠的，因爲0到360之間的過渡意味着你不會去任何地方。所以，在懸停的時候將你的屬性從一個移動到另一個。你的代碼最終會看起來像這樣：

@keyframes spin { 
    from { transform: scale(.1,.1) skew(0deg) rotate(0deg); } 
    to { transform: scale(1,1) skew(0deg) rotate(360deg); } 
} 
.myMsg:hover { 
    animation: spin 1s forwards; 
} 

的@keyframes定義將發生的動畫，你想從一組特性轉換到最後一節。然後，您將您的:hover設置爲播放該動畫。動畫的相關屬性是animation-name,animation-duration和animation-fill-mode（這就是說它應該和動畫完成時的最後一幀具有相同的屬性，Webkit需要前綴，因此您也可以將它們放入。

除此之外，我還在.myMsg類上放置了一個transition: transform 1s;，以便在鼠標移開後它可以回放動畫，但請注意，Webkit似乎不能很好地處理兩者之間的交互，所以它是有點不穩定，不太理想，但是，有了這樣的實驗性能，有時你會得到你所得到的結果

一些附註：

• 你的CSS不是跨瀏覽器兼容的，你應該把它清理一下
• 你正在定義1個transform屬性，然後立即覆蓋它。所有轉換都需要在同一個聲明中進行。他們不能這樣組合

Answer 2

定義一個infinite css animation with keyframes for spinning並切換到它上懸停。對大小（高度/寬度）屬性使用轉換，並將其懸停在CSS中也進行更改。

實施例：http://jsfiddle.net/6guCd/

div { 
    margin: 100px; 
    width: 100px; 
    height: 100px; 
    background: #f00; 
    -webkit-transition: all 200ms ease; 
    -moz-transition: all 200ms ease; 
    -ms-transition: all 200ms ease; 
    transition: all 200ms ease; 
} 
div:hover { 
    margin: 50px; 
    width: 200px; 
    height: 200px; 
    -webkit-animation-name: spin; 
    -webkit-animation-duration: 4000ms; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear; 
    -moz-animation-name: spin; 
    -moz-animation-duration: 4000ms; 
    -moz-animation-iteration-count: infinite; 
    -moz-animation-timing-function: linear; 
    -ms-animation-name: spin; 
    -ms-animation-duration: 4000ms; 
    -ms-animation-iteration-count: infinite; 
    -ms-animation-timing-function: linear; 

    animation-name: spin; 
    animation-duration: 4000ms; 
    animation-iteration-count: infinite; 
    animation-timing-function: linear; 
} 
@-ms-keyframes spin { 
    from { -ms-transform: rotate(0deg); } 
    to { -ms-transform: rotate(360deg); } 
} 
@-moz-keyframes spin { 
    from { -moz-transform: rotate(0deg); } 
    to { -moz-transform: rotate(360deg); } 
} 
@-webkit-keyframes spin { 
    from { -webkit-transform: rotate(0deg); } 
    to { -webkit-transform: rotate(360deg); } 
} 
@keyframes spin { 
    from { 
     transform:rotate(0deg); 
    } 
    to { 
     transform:rotate(360deg); 
    } 
}