html - 如何更改 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;
    }

请注意，仅仅因为 float 的性质和元素的移动，您会在许多元素中遇到一些奇怪的行为。 Play around with this fiddle当它缩小时，至少有两行 div。

边距说明

115px 右边距将下一个元素推到上方(您想要的“shift”)，为元素扩展留出空间。它是元素的宽度，加上元素的 5px 边距，再加上较大尺寸的元素将其边距增加到 10px 这一事实。 进入 发生右 移位的空间。扩展本身的方向通过 -105px 发生，这是导致元素向左扩展的原因(正如您最初想要的那样)。

更新您的新照片:Take a look at this fiddle .仍然存在一些小错误，但基于一组三个 div 的功能很好(有一个额外的非语义 span 使我的功能正常工作)。