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

假设我有一个

，我想把它从小尺寸扩展到大尺寸（请参阅）

默认情况下，

上的宽度和高度CSS3转换将从左上角开始，并向右下角推进。但是，我希望

从右上角展开到左下角

我的问题是：有没有办法让

从右上角到左下角进行宽度和高度转换？

这里有一张图片来澄清我的问题。基本上，我希望我的

像右边的框一样展开，而不是像左边的框所示的默认方式。 从右上角展开到左下角，如下图所示，而不是从左上角展开到右下角。“>

这是另一张图片：

---

您可以将

div:hover

边距更改为

margin:10px 10px 0px-100px；

之类的边距，以获得所需的效果。但是，您需要同时调整div和hover上的边距（如果您不能使用float:right）。

因为您想让东西“移位”，那么您就看不到它从右向左增长的事实，但是（它调整了一些其他边距，并添加了相对偏移）：

注意，仅仅因为浮动的性质和项目的移动，您将在许多元素中获得一些奇怪的行为。当它被缩小时，至少有两行div

利润解释

115px

右边距将以下元素推到上方（您想要的“移位”），为元素扩展留出空间。它是元素的宽度，加上元素上的

5px

边距，再加上较大尺寸的元素将其边距增加到

10px

。

向右

移动就是在这个空间中发生的。扩展方向本身通过

-105px

发生，这就是导致元素向左扩展的原因（正如您最初希望的那样）

---

更新到更新的图片：。仍然有一些小错误，但功能很好地基于一组三个div（还有一个额外的非语义

span

，使我的功能正常工作）。

正在等待问题注释中请求的更多详细信息

现在我理解这样的任务

.包装纸{
浮动：左；
}
.盒子{
宽度：100px；
高度：100px；
浮动：对；
背景：url(http://placekitten.com/200/200/)无重复100%0；
-webkit过渡：全部。5s轻松；
-moz过渡：全部5秒轻松；
-ms过渡：全部5秒轻松；
-o型过渡：全部。5秒轻松；
过渡：所有。5s轻松；
}
.box:悬停{
宽度：200px；
高度：200px；
}

这是不完整的，但如果您将它们包装在另一个固定的div中，可能会有点难看，但可能方向正确。（借用斯科特的小提琴）

我也把两个分区分开了，因为看起来你只能把两个分区圈在一个给定的方向上

试试这个：

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

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

---

如果将div向右浮动，则转换将按需要进行，而不是将元素向左浮动；我需要有一个这些瓷砖的网格，它们需要正确地对齐在一起。不清楚你想要达到什么。我可以想象你小提琴中的深灰色方框会向任何方向扩展：）你能提供更详细的过渡前/后描述或图像吗？悬停第二个div的最终结果应该是什么样的？其他部门应该移动吗？新形象更清晰，谢谢！当2的顶面低于1和3的顶面时，我看到了问题-这是不可能的，因为根据规范浮动，只能通过一些变通方法来完成。需要试验。啊，但问题是现在div不能动态移动。负边距只是覆盖了div。我现在明白你的意思了。我不确定是否有一种纯css转换方法可以在没有浮动的情况下做到这一点。我喜欢使用相对移位的想法，但不幸的是，这没有我想要的从右上到左下的转换。然而，这使我倾向于更接近的答案+1.@Bagavatu：我认为如果你想移动元素，你的TR/BL转换在视觉上是不可能的，原因有两个：1）实际上是我的，但它看起来不像它，因为当它转换TR/BL时，它也在移动

右
（小提琴移除了
右
移位）。这导致2）它必须将元素向右“移动”，因为它不能使用纯css将元素向左移动（使用
float:left
）。现在，如果你能做
float:right
。啊，我明白了。非常感谢。这似乎是迄今为止最好的答案！如果没有更好的答案，我很快就会接受奖励。@Bagavatu:如果你只需要三个元素，那么我想我可以得到一些与你上面想象的类似（尽管不完全相同）的有趣功能。查看我的更新答案。@Bagavatu:我对答案添加了解释。我希望这有帮助。我还计划在我有时间的时候尝试改进代码，因为我想尽量减少一些bug（例如，将鼠标悬停在“2”上，然后直接移动到“1”）。这个解决方案很接近，但问题是它经常闪烁。我很确定那是因为浮子。谢谢你的意见！
<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;
}

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

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

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