Question

我有位置：绝对和宽度：100％，我想为它设置动画，所以我在悬停中添加了transform：scale（1.2），但它改变了宽度。怎么预防呢？

＆＃13;

.caption
{
    position: absolute;
    left: 0;
    top: 50%;
    text-align: center;
    color: #000;
    width: 100%;
}
 
.caption span.border
{
    color: #fff;
    font-size: 50px;
    letter-spacing: 10px;
    transition: transform .5s ease-in-out;
    display: block;
}
 
.caption span.border:hover
{
    cursor: pointer;
    transform: scale(1.2);
}

＆＃13;

Answer 1

由于跨度为display: block，因此宽度为标题的100％。当跨度缩放时，宽度变为120％。

根据此元素的上下文，您可以尝试以下几种方法。

您可以将范围更改为display: inline-block，使其宽度不是100％，但仍可以缩放。
你可以给出标题overflow: hidden，这样即使边框溢出，它也不会引起奇怪的尺码问题。但是，您需要确保标题栏中有足够的垂直空间。

Here is a jsFiddle您可以在其中使用每个选项并找到最适合的选项。

变换宽度变化

1 个答案: