如何更改CSS转换的起始位置？

Question

假设我有一个<div>我希望从小尺寸扩展到更大尺寸(见这个).

默认情况下,a的宽度和高度CSS3过渡<div>将从左上角开始,然后向右下方进行.但是,我希望<div>从右上角扩展到左下角.

这是我的问题:有什么方法可以让我<div>从右上角到左下角进行宽度和高度过渡？

这是一张图片来澄清我的问题.基本上,我希望我<div>像右边的框一样展开,而不是像左边的框所示的默认方式.

这是另一张图片:

Answer 1

因为你想要让事情"转变",那么你并没有真正看到它从右到左增长的事实,但我认为这可以实现你想要的东西(它调整了一些其他的边缘,并增加了一个亲戚转移):

  div {
        width:100px; 
        height:100px; 
        float:left;
        margin:5px;
        position: relative;
        right: 0;
        box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
        background-color:rgba(25,25,25,0.7);
        transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
    }
  div:hover {
        width:200px;
        height:200px;
        margin:10px 115px 0px -105px;
        right: -110px;
    }

请注意,仅仅因为花车的性质和物品移动,你会得到许多元素的奇怪行为.当它缩小时,可以使用这个小提琴,因此至少有两行div.

边距说明

在115px右边距推动以下元素上(以下简称"转移"你想)做的元素拓展空间.它是元素的宽度,加上元素的5px边距,再加上大尺寸元素增加其边距的事实10px.这是进入这个空间的right转变发生.扩展的方向本身就是通过-105px,这是导致元素向左扩展的原因(正如你最初想要的那样).

更新你的新图片:看看这个小提琴.还有一些小错误,但功能很好地基于一组三个div(有一个额外的非语义span使我的功能工作).