从 div 中心开始的 CSS 过渡宽度和高度

Question

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

有没有办法对此进行更多控制？

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

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

---

编辑：

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

感谢您的回答，但在这种情况下，使用变换缩放不是解决方案。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

我建议在对位置进行动画处理时使用transform: translate，因为它对性能更好，然后您可以使用transform-origin控制其原点。

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

假设您想从中心向外将尺寸翻倍。然后你只需要写transform: scale(2.0)，因为transform-origin的默认值是50% 50%。

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

Answer 3

您可以同时更改位置以模拟效果。但我和其他人在一起：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 4

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

变换：矩阵(A， B， C， D， E， F);

哪里

a= 刻度 X 轴

b= 偏斜X

c= 偏斜

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 5

不确定这是否正是您要查找的，但此解决方案不是基于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 6

您可以尝试使用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 7

这是您要实现的目标吗？ 使用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>