html - 居中居中文本的增长效果

Question

由于 transform: translateZ(0); h1 的位置改变了。如果我删除它，效果将无法正常工作。

我怎样才能更改下面的代码并使 h1 居中，并且在文本中心出现增长效果？

我从 here 中发现了增长效应但是代码有相互冲突的转换

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-对齐:中间技巧。

这是一个工作示例:

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>