html - 使用CSS将一个div从左上角移动到右下角

Question

我正在尝试仅使用 CSS 将一个 div 从左上角移动到右下角(这是我的作业所必需的)。此外，我需要看到发生的转换(div 滑到底部)。我尝试使用 transform:translate() 但我无法让我的 div 转到底 Angular !这是我到目前为止所做的:http://codepen.io/ascii-hero/pen/JXEXVB

Answer 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.4s(秒)，但可以将其更改为任何合适的值。

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

top:100%;left:100%; 

但是，我相信您已经意识到这样做会将最左上角放在这个位置，可以这么说 (100%,100%)。因此，这就是包含 translate 以“将框移回屏幕上”的原因。 translate 属性有两个值，X 和 Y 倾向。通过使用 % 作为单位，它将移动框的宽度或高度大小的 %，具体取决于您移动它的轴。换句话说，使用

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

会将框 100%(自身)向左移动，并 100%(其高度)向上移动，因此可以在页面右下角看到它。