div中心的CSS过渡宽度和高度

Question

我有 position: absolute; 元素，我想在某些情况下进行过渡。但是，宽度和高度过渡的起点似乎取决于顶部/底部左/右值。

有什么方法可以更好地控制这个吗？

我特别希望从 div 的中心过渡。

是否有任何不依赖于转换顶部/底部左/右值的解决方案？

---

编辑：

我想保持宽度和高度的过渡。

感谢您的回答，但在这种情况下使用 变换比例不是解决方案。 Transform property 中的百分比是指元素边框的大小，而不是容器的大小。参见例如this JSFiddle，将鼠标悬停在两个元素上的最终结果有何不同。

---

JSFiddle

div, span {
  width:30%;
  height:30%;
  background:pink;
  transition:all 1s ease;
  position:absolute;
}
*:hover{
  width:10%;
  height:10%;
}
div{
  top:10%;
  left:10%;
}
span{
  bottom:10%;
  right:10%;
}

<div></div>
<span></span>

Answer 1

这是你想要达到的目标吗？使用translate会根据元素本身的宽度和高度改变元素的位置。

div, span {
  width:30%;
  height:30%;
  background:pink;
  transition:all 1s ease;
  position:absolute;
  transform: translate(-50%, -50%);
}
*:hover{
  width:10%;
  height:10%;
}
div{
  top:25%;
  left:25%;
}
span{
  top:75%;
  left:75%;
}

<div></div>
<span></span>

Answer 2

最好的方法是使用矩阵，这可以让你结合转换和转换。 矩阵有 6 个参数

变换：矩阵（a，b，c，d，e，f）；

在哪里

a= 缩放 X 轴

b=skewX

c=skewY

d= 缩放 Y 轴

e= X 位置

f= Y 位置

在这种情况下，我将 X 轴上的比例（这将改变宽度）设置为悬停后初始宽度的两倍。 （值 2 表示初始比例乘以 2） Y 轴上的比例没有改变（值 1 表示初始比例乘以 1，因此高度不会改变）其余参数为 0，因为在这种情况下您不需要使用它们。

.example {
  width: 30%;
  height: 30%;
  background-color: pink;
  position: absolute;
  top: 35%;
  left: 35%;
  transition: width, height, transform 1s;
}
.example:hover {
  transform: matrix(2, 0, 0, 1, 0, 0);
}

<div class="example"></div>

Answer 3

您可以尝试使用transform: translate(-50%, -50%); 看看是否有帮助。

.example {
  width: 30%;
  height: 30%;
  background: pink;
  transition: all 1s ease;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.example:hover {
  width: 10%;
  height: 10%;
}

<div class="example"></div>

Answer 4

不确定这是否正是您要寻找的，但此解决方案不是基于transform: scale，您可以手动设置悬停时 div 的所需宽度和高度，甚至以百分比表示。

而且百分比是相对于容器的宽度而言的。

HTML

<div id="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

CSS

#container{
  width: 400px;
  height: 400px;
  background: #eee;
  position: relative;
}

.box{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #000;
  width: 20%;
  height: 20%;
  transition: 0.3s;
  cursor: pointer;
}

.box:hover{
  width: 7%;
  height: 10%;
}

.box:nth-child(2){
  left: 20%;
}

.box:nth-child(3){
  top: 20%;
}

.box:nth-child(4){
  top: 20%;
  left: 20%;
}

#container {
  width: 400px;
  height: 400px;
  background: #eee;
  position: relative;
}
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #000;
  width: 20%;
  height: 20%;
  transition: 0.3s;
  cursor: pointer;
}
.box:hover {
  width: 7%;
  height: 10%;
}
.box:nth-child(2) {
  left: 20%;
}
.box:nth-child(3) {
  top: 20%;
}
.box:nth-child(4) {
  top: 20%;
  left: 20%;
}

<div id="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Answer 5

你可以同时改变位置来模拟效果。但我和其他人在一起：transform: scale 是解决这个问题的更好方法。

div, span {
  width:30%;
  height:30%;
  background:pink;
  transition:all 1s ease;
  position:absolute;
}
div{
  top:10%;
  left:10%;
}
div:hover{
  width:10%;
  height:10%;
  top: 20%;
  left: 20%;
}
span{
  bottom:10%;
  right:10%;
}
span:hover{
  width:10%;
  height:10%;
  bottom: 20%;
  right: 20%;
}

<div></div>
<span></span>

带变换的版本：

div, span {
  width:30%;
  height:30%;
  background: red;
  transition: all 1s ease;
  position: absolute;
}
div{
  top:10%;
  left:10%;
}
div:hover{
  transform-origin: 50% 50%;
  transform: scale(0.3);
}
span{
  bottom:10%;
  right:10%;
}
span:hover{
  transform-origin: 50% 50%;
  transform: scale(0.3);
}

<div></div>
<span></span>

Answer 6

我建议在动画位置时使用transform: translate，因为它是better for performance，然后您可以使用transform-origin 控制它的原点。

如果你想改变宽度或高度，同样可以使用transform: scale。

假设你想从中心向外加倍大小。那么你只需要写transform: scale(2.0)，因为transform-origin的默认值是50% 50%。

在此处查看示例：https://jsfiddle.net/ydpx284g/

Answer 7

好吧，你总是可以使用 transform - scale 来解决这个问题：

div {
  background:pink;
  width:200px;
  height:200px;
  transition:all 1s ease;
}
div:hover{
        -webkit-transform: scale(0.1);
        -ms-transform: scale(0.1);
        transform: scale(0.1);
}

<div></div>