我有 position：absolute; 的元素，我想在某些情况下转换。但是，宽度和高度过渡的原点似乎取决于上/下左/右值。
有没有办法对此进行更多控制？
我特意想从div的中心过渡。
是否有任何解决方案不依赖于转换上/下左/右值？
修改：
我想保持宽度和高度的过渡。
感谢您的回答，但在这种情况下使用转换比例不是解决方案。 Transform property中的百分比是指元素边框的大小，而不是容器的大小。例如，参见this 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>
答案 0 :(得分：4)
嗯，你可以随时使用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>
答案 1 :(得分：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>
答案 2 :(得分：2)
我建议在动画位置时使用transform: translate，因为它是better for performance，然后您可以使用transform-origin来控制其来源。
如果您想更改宽度或高度，您可以使用transform: scale。
假设您希望从中心向外扩大尺寸。然后你只需要写transform: scale(2.0)，因为transform-origin的默认值是50% 50%。
请参阅此处的示例：https://jsfiddle.net/ydpx284g/
答案 3 :(得分：1)
不确定这是否正是您所需要的，但此解决方案并非基于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>
答案 4 :(得分：1)
最好的方法是使用矩阵，这允许您组合过渡和变换。 矩阵需要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>
答案 5 :(得分：0)
您可以尝试使用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>
答案 6 :(得分：0)
这是您要实现的目标吗？使用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>