居中居中文本的增长效果

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-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

问题出在你header的定位上。当您绝对定位时，变换始终从边缘开始 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>

居中居中文本的增长效果

centering a grow effect for a centered text

html

css

centering