Question

我正在尝试仅使用CSS将div从左上角移动到右下角（这是我的作业所必需的）。此外，我需要看到转换发生（div滑到底部）。我尝试使用transform:translate()，但我无法让我的div进入底角！以下是我迄今为止所做的事情：http://codepen.io/ascii-hero/pen/JXEXVB

Answer 1

Tldr;

解决方案1：使用左/右/上/下定位

为了让你的div移动，你需要将父元素设置为relative，将div设置为absolute。请注意，因为html元素是“最顶层”元素。 html树的元素，它自动假定为relative位置。

＆＃13;

div {
  background: red;
  height: 50px;
  width: 50px;
  position: absolute;
  top: 0;
  left: 0;
}
html:hover div {
  top: auto;
  left: auto;
  bottom: 0;
  right: 0;
}

＆＃13;

<div></div>

＆＃13;

解决方案2：转换

使用变换很棒，因为你可以添加过渡以获得平滑效果。请注意，您只需要对解决方案1添加一些细微的更改。

＆＃13;

div {
  background: red;
  height: 50px;
  width: 50px;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.4s;
}
html:hover div {
  top: 100%;
  left: 100%;
  transform: translate(-100%, -100%);
}

＆＃13;

<div></div>

＆＃13;

解决方案2的解释

要允许转换，DOM需要知道起点，终点和持续时间显式。因此，开始设置为

top:0; left:0;

表示左上角和左上角。

＆＃39;持续时间＆＃39;可以使用transition属性进行设置。在这里，我将其设置为0.4秒（秒），但这可以更改为任何合适的值。

最后，最重要的是，您需要为转换设置明确的终点。

在这里你会注意到

top:100%;left:100%;

但是，我确信你知道这样做会把左上角放在这个位置，（100％，100％）可以这么说。因此，包含translate以将盒子移回屏幕的原因是＆＃39;。 translate属性有两个值，X和Y处理。通过使用％作为单位，它将移动框的宽度或高度的百分比，具体取决于您移动它的轴。换句话说，使用

transform:translate(-100%, -100%);

将100％（自身）移动到左侧，100％（高度）向上移动，因此可以在页面的右下角看到。

Answer 2

试试这个

#block:hover {
  left: 100%;
  top: 100%;
    -webkit-transition-property: left, top, background, -webkit-transform;
    -webkit-transition-duration: 2s, 2s, 1s, 1s;
    transform:translate(-100%, -100%);
  }

我在移动设备上，所以我没有测试过，但它/应该/工作

Answer 3

所以你想将div移动到右下角。在您正在执行的代码中

#block {
 background: cornflowerblue;
 width: 100px;
 height: 100px;
 left: 0;
 top: 0;
}

所以不要将top设为0，而是希望bottom为0，而不是左边，你想要正确。

使用css将div从左上角移动到右下角

3 个答案: