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

Question

假设我有<div>我希望从小尺寸扩展到更大尺寸（参见this）。

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

以下是我的问题：有没有办法让<div>经历从右上角到左下角的宽度和高度过渡？

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

这是另一张图片：

Answer 1

因为你想要让事情“转变”，那么你并没有真正看到它从右到左增长的事实，但是I think this achieves what you are desiring（它调整了一些其他边缘，并添加了一个亲戚移）：

  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;
    }

请注意，仅仅因为花车的性质和物品的移动，你会得到许多元素的奇怪行为。 Play around with this fiddle当它缩小时，至少有两行div。

边距说明

115px右边距将以下元素推过（您想要的“移位”），为元素扩展腾出空间。它是元素的宽度，加上元素上的5px边距，加上较大的元素元素将其边距增加到10px。 进入此空间发生right转换。扩展的方向本身通过-105px发生，这是导致元素向左扩展的原因（正如您最初想要的那样）。

更新到您的新图片：Take a look at this fiddle。还有一些小错误，但功能很好地基于一组三个div（有一个额外的非语义span来使我的功能工作）。

Answer 2

您可以将div:hover页边距更改为margin:10px 10px 0px -100px;，并获得所需的效果。但是，您需要在div和hover上调整边距（如果不能使用float：right）。 http://jsfiddle.net/7ZUeu/14/

Answer 3

等待有关评论中要求的更多详情。

现在我理解像http://jsfiddle.net/7ZUeu/34/

这样的任务

<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

.wrapper {
  float:left;
}

.box {
  width:100px; 
  height:100px; 
  float:right;
  background:url(http://placekitten.com/200/200/) no-repeat 100% 0;
  -webkit-transition: all .5s ease;
     -moz-transition: all .5s ease;
      -ms-transition: all .5s ease;
       -o-transition: all .5s ease;
          transition: all .5s ease;
}
.box:hover {
  width:200px;
  height:200px;
}

Answer 4

这是不完整的，但也许你将它们包装在另一个固定的div中。同样，这有点丑陋，但也许它正朝着正确的方向发展。 （借用ScottS的小提琴）。

div.one,.two,.three {
  display: inline-block;
  float: left;
  width:100px; 
  height:100px; 
  margin:3px;
  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.one:hover,div.two:hover {
  width:200px;
  height:200px;
  margin:3px 113px 0px -100px;
  right: -110px;
  float:right;
}

div.three:hover {
  width:200px;
  height:200px;
  margin:3px 113px 0px -100px;
  right: -110px;
}

div.fixed {
  width: 330px;
  height: 220px;
  background: whitesmoke;
}

我也把div分开了，因为看起来你只能在给定的方向上围绕其中两个......

http://jsfiddle.net/YAGmC/1/

Answer 5

试试这个：

.right{
width:100px; 
height:100px; 
float:right;
background-color:#000000;
}

.right:hover{
margin-left:-300px;
width:300px;
transition:0.3s
}