我希望能夠單擊 a <div>（其中包含一些文本）并能夠正確縮放它。我縮放<div>使用transform: scale(<x>).下面代碼的問題在于縮放會推動<div>“向前”并且在懸停時有點混亂。我想要的效果是它彈出，這樣它就停留在中間，但是它擴展了它的寬度和高度。示例（注意字體大小增加）：有問題的示例代碼：div { position: absolute; width: 300px; height: 150px; border: 1px black solid; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center;}div:hover { transform: scale(1.5);}<!DOCTYPE html><html><head> <meta charset="UTF-8"></head><body> <div>This is a div.</div></body></html>
1 回答
桃花長相依
TA貢獻1860條經驗 獲得超8個贊
翻譯還應該針對縮放版本進行調整：
div {
position: absolute;
width: 300px;
height: 150px;
border: 1px black solid;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
}
div:hover {
transform: translate(-50%, -50%) scale(1.5);
}
<div>This is a div.</div>
- 1 回答
- 0 關注
- 148 瀏覽
添加回答
舉報
0/150
提交
取消