html - 如何更改 CSS 过渡的起点？

Question

假设我有一个<div>我想从小尺寸扩展到更大尺寸的产品（请参阅this）。

默认情况下，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使我的功能工作）。

Answer 2

您可以将div:hover边距更改为类似的东西margin:10px 10px 0px -100px;并获得所需的效果。但是，您需要调整 div 和悬停的边距（如果您不能使用 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
}