CSS -如何使div的宽度变化向左而不是向右?

Question

现在我有了这个小东西:

table {
width: 200px;
height: 100px;
}
.arrow {
border-radius: 1rem;
width: 100%;
height: 100%;
background-color: black;
transition: 200ms;
}
.arrow:hover {
border-radius: 1.2rem;
width: 120%;
height: 120%;
}
.arrow:active {
border-radius: 0.9rem;
width: 90%;
height: 90%;
}

<table>
<tr>
<td><div class="arrow"></div></td>
<td><div class="arrow"></div></td>
</tr>
</table>

右边的div做的正是我想要的，但我希望左边的div能朝相反的方向改变宽度。有办法做到这一点吗?

Answer 1

用transform代替width和height制作动画

因为width和height会导致内容重绘并导致性能问题(例如，如果你的布局由100个容器组成，顶部的10个容器改变了它们的大小，下面的所有90个容器将不得不每秒回流和动画60次)，通常建议你在动画调整大小时使用transform属性。请看这个Web.dev演示

使用transform-origin确定转换锚点

根据MDN Doc:

转换原点是应用转换的点。例如，rotate()函数的变换原点是旋转的中心。

请参阅下面的工作代码片段。我用transform: scale()代替了你的width和height行，并在每个盒子上添加了transform-origin的区别。

table {
width: 200px;
height: 100px;
}
.arrow {
border-radius: 1rem;
width: 100%;
height: 100%;
background-color: black;
transition: transform 200ms;
}
.left {
transform-origin: right;
}
.right {
transform-origin: left;
}
.arrow:hover {
border-radius: 1.2rem;
transform: scale(1.2);
}
.arrow:active {
border-radius: 0.9rem;
transform: scale(0.9);
}

<table>
<tr>
<td>
<div class="arrow left"></div>
</td>
<td>
<div class="arrow right"></div>
</td>
</tr>
</table>