以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

不要使用字体转换，只需使用变换比例即可。为了使其工作，您必须设置显示：跨度上的内联块，因为内联元素尚不支持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/更新到您的原始小提琴。