Question

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

如何更改下面的代码并使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技巧。

这是一个有效的例子：

＆＃13;

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);
}

＆＃13;

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

＆＃13;

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>

将居中文本的增长效果居中

2 个答案: