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

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

位置。

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

<div></div>

---

解决方案2：变换

使用变换非常棒，因为您还可以添加过渡以获得平滑的效果。请注意，您只需要对解决方案 1 稍加修改即可。

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

<div></div>

解决方案2的说明

为了进行变换，DOM 需要明确知道起点、终点和持续时间。因此，开始设置为

top:0; left:0;

代表顶值和左值。

可以使用

transition

属性设置“持续时间”。这里我将其设置为 0.4 秒（秒），但可以将其更改为任何合适的值。

最后，也是最重要的，您需要为转换设置一个明确的终点。在这里你会注意到

top:100%;left:100%; 

但是，我相信您知道这样做会将左上角放在这个位置，可以这么说（100％，100％）。因此，这就是包含

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

对我很有用谢谢台湾外送茶

Answer 4

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

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

因此，您希望底部为 0，而不是顶部为 0，并且您希望右侧而不是左侧。