Html 如何反转css转换属性宽度？

因此，我想制作一个css动画属性，其中宽度向左延伸，但始终向右延伸。我正在试图找出如何使宽度向左延伸，而不是默认的向右延伸。我应该如何处理这个问题？JsFiddle如下


Html:

Css:

div
{
    position:absolute;
    bottom:130px;
    left:130px;
    width:100px;
    height:100px;
    background:red;
    -webkit-transition:width 2s; 
}

div:hover
{
    width:200px;
}

同时调整
左
值：


您需要覆盖左侧以向左延伸宽度。
您使用了
左：130px
是div的起点。在
div:hover
上，您仍然没有更改左侧，因此它会自动向右扩展，因为您还设置了
底部：130px

您的默认
宽度：100px在
div:hover上更改为
width:200px
因此您需要在
div:hover
上减少左起始位置。这是一本书

由于您已经从底部和左侧设置了它的位置130，所以它总是向右侧延伸，因为您已经固定了它的位置
div {
    position:absolute;
    bottom:130px;
    left:130px;
    width:100px;
    height:100px;
    background:red;
    -webkit-transition:left 2s, width 2s;
}
div:hover {
    left:30px;
    width:200px;
}

div {
    position:absolute;
    bottom:130px;
    left:130px;
    width:100px;
    height:100px;
    background:red;
    -webkit-transition:left 2s, width 2s;
}
div:hover {
    left:30px;
    width:200px;
}