居中一个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 /更新提供给您原来的小提琴。