我希望能夠單擊 a <div>（其中包含一些文本）并能夠正確縮放它。我縮放<div>使用transform: scale(<x>).下面代碼的問題在于縮放會(huì)推動(dòng)<div>“向前”并且在懸停時(shí)有點(diǎn)混亂。我想要的效果是它彈出，這樣它就停留在中間，但是它擴(kuò)展了它的寬度和高度。示例（注意字體大小增加）：有問題的示例代碼：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貢獻(xiàn)1860條經(jīng)驗(yàn) 獲得超8個(gè)贊
翻譯還應(yīng)該針對縮放版本進(jìn)行調(diào)整：
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 關(guān)注
- 138 瀏覽
添加回答
舉報(bào)
0/150
提交
取消