居中使增长效果居中居中

Question

因为 h1 的位置transform: translateZ(0);变化。如果我删除它，效果无法正常工作。

如何更改下面的代码并使 h1 居中，并在文本中心发生增长效果？

我从这里发现了增长效果，但代码具有相互冲突的转换

h1{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.hvr-grow {
transform-origin:center center;
display: inline-block;
vertical-align: middle;
/*transform: translateZ(0);*/
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
transition-duration: 0.3s;
transition-property: transform;
}
.hvr-grow:hover,
.hvr-grow:focus,
.hvr-grow:active {
transform: scale(1.8);
}

<div style="position:relative">
<h1 class="hvr-grow">Hello I'm centered</h1>
</div>

Answer 1

这是因为您已经对同一元素应用了两种不同的 CSS 转换：首先，您应用了translate(-50%, -50%)，然后应用scale(1.8)。CSS转换的烦人之处在于它们不堆叠，所以基本上你的缩放会覆盖翻译......换句话说，对于原始代码，以下样式将应用于悬停状态：

transform: translate(-50%, -50%);  /* This will be overwritten! */
transform: scale(1.8);             /* Overwrites all preceding transforms */

您可以做的只是将它们组合在:hover选择器中，即

transform: translate(-50%, -50%) scale(1.8);

p/s：附带说明一下，由于您正在使用 CSS 转换技巧来垂直居中您的元素，因此您无需使用display: inline-block和vertical-align: middle技巧。

这是一个工作示例：

h1{
position: absolute;
top: 50%;
left: 50%;
}
.hvr-grow {
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
transition-duration: 0.3s;
transition-property: transform;
transform: translate(-50%, -50%);
}
.hvr-grow:hover,
.hvr-grow:focus,
.hvr-grow:active {
transform: translate(-50%, -50%) scale(1.8);
}

<div style="position:relative">
<h1 class="hvr-grow">Hello I'm centered</h1>
</div>

Answer 2

问题在于标题的位置。当您绝对定位它时，转换始终从边缘开始 50%。为了使文本正确动画化，您可以将<h1/>容器设为 100% 宽，然后使用文本居中 CSS 将文本居中：

h1{
position: relative;
width: 100%;
text-align: center;
}
.hvr-grow {
transform-origin:center center;
display: inline-block;
vertical-align: middle;
/*transform: translateZ(0);*/
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
transition-duration: 0.3s;
transition-property: transform;
}
.hvr-grow:hover,
.hvr-grow:focus,
.hvr-grow:active {
transform: scale(1.8);
}

<div style="position:relative">
<h1 class="hvr-grow">Hello I'm centered</h1>
</div>