CSS中心的过渡宽度和高度

Question

我有位置元素:绝对; 我想在某些情况下过渡.但是,宽度和高度过渡的原点似乎取决于上/下左/右值.

有没有办法对此有更多的控制权？

我特意想从div的中心过渡.

是否有任何解决方案不依赖于转换上/下左/右值？

---

编辑:

我想保持宽度和高度过渡.

感谢您的答案,但在这种情况下使用Transform scale不是解决方案.Transform属性中的百分比是指元素边框的大小,而不是容器.例如,参见这个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

好吧，你总是可以使用 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>

Answer 2

最好的方法是使用矩阵，这允许您结合转换和变换。矩阵有 6 个参数

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

在哪里

a= X 轴刻度

b= 偏斜X

c=偏斜Y

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在对位置进行动画处理时使用，因为它的性能更好，然后您可以使用 控制其原点transform-origin。

如果您想更改宽度或高度，您可以类似地使用transform: scale.

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

请参阅此处的示例： https: //jsfiddle.net/ydpx284g/