居中一個CSS變換（比例）

Question

我在這裏創建了一個小提琴，只是想知道如何去對準對象 - 讓心臟居中，當它懸停在它上面時會向外擴展，而不是動畫到右下。

@-webkit-keyframes beat { 
0% { 
-webkit-transform: scale(1); 
-webkit-filter: drop-shadow(0 0 8px rgba(213, 9, 60, 0.7)); 
font-size: 90%; 
color: #cc0404; 
} 

50% { 
-webkit-transform: scale(1.1); 
-webkit-filter: drop-shadow(0 0 15px rgba(213, 9, 60, 0.2)); 
font-size: 120%; 
color: #e50505; 
} 

100% { 
-webkit-transform: scale(1); 
-webkit-filter: drop-shadow(0 0 8px rgba(213, 9, 60, 0.7)); 
font-size: 90%; 
color: #cc0404; 
} 
} 

.heart-box { 
margin: 0 auto; 
width: 90%; 
padding-top: 20px; 
cursor: pointer; 
font-size: 15em; 
-webkit-filter: drop-shadow(0 0 0 white); 
-moz-filter: drop-shadow(0 0 0 white); 
filter: drop-shadow(0 0 0 white); 
} 

.heart { 
color: #e62020; 
-webkit-transition: font-size 0.1s ease; 
-moz-transition: font-size 0.1s ease; 
transition: font-size 0.1s ease; 
-webkit-transition: color 0.3s ease; 
-moz-transition: color 0.3s ease; 
transition: color 0.3s ease; 
} 

.heart:hover, .heart:focus { 
-webkit-animation: beat 0.7s ease 0s infinite normal; 
-moz-animation: beat 0.7s ease 0s infinite normal; 
-ms-animation: beat 0.7s ease 0s infinite normal; 
-o-animation: beat 0.7s ease 0s infinite normal; 
animation: beat 0.7s ease 0s infinite normal; 
} 

http://jsfiddle.net/DBirkett/3DbTn/

Answer 1

不要使用字體轉換，只需使用一個轉換的規模。爲了實現這一點，您必須在span上設置display：inline-block，因爲內聯元素不支持webkit中的變換。您可能沒有注意到它，但是原始代碼中的這些轉換對webkit瀏覽器沒有任何影響。

像這樣的事情

@-webkit-keyframes beat { 
    0% { 
    -webkit-transform: scale(1); 
    -webkit-filter: drop-shadow(0 0 8px rgba(213, 9, 60, 0.7)); 
    color: #cc0404; 
    } 

    50% { 
    -webkit-transform: scale(2); 
    -webkit-filter: drop-shadow(0 0 15px rgba(213, 9, 60, 0.2)); 
    color: #e50505; 
    } 

    100% { 
    -webkit-transform: scale(1); 
    -webkit-filter: drop-shadow(0 0 8px rgba(213, 9, 60, 0.7)); 
    color: #cc0404; 
    } 
} 


.heart { 
    display: inline-block; 
    color: #e62020; 
    -webkit-transition: font-size 0.1s ease; 
    -moz-transition: font-size 0.1s ease; 
    transition: font-size 0.1s ease; 
    -webkit-transition: color 0.3s ease; 
    -moz-transition: color 0.3s ease; 
    transition: color 0.3s ease; 
} 

此外，在/ 7 /更新提供給您原來的小提琴。