變換寬度

Question

我有位置：絕對和寬度：100％的跨度，我想動畫它，所以我添加了變換：懸停的比例（1.2），但它改變了寬度。如何預防它？

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

Answer 1

由於跨度具有display: block，它的寬度是字幕的100％。當量程縮放時，寬度變爲120％。

根據此元素的上下文，您可以嘗試以下幾件事。

• 您可以將範圍更改爲display: inline-block，因此它不具有100％的寬度，但仍可以縮放。
• 您可以提供標題overflow: hidden，以便即使邊框溢出，也不會導致奇怪的尺寸問題。但是，您需要確保字幕塊中有足夠的垂直空間。

Here is a jsFiddle在哪裏你可以玩每個選項，找到最適合的選擇。