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

Question

I am trying to move a div from top left corner to bottom right corner using only CSS (this is required for my assignment). Also, I need to see the transition happening (the div sliding to the bottom). I tried using transform:translate() but i can't get my div to go to the bottom corner! Here is what I've done until now: http://codepen.io/ascii-hero/pen/JXEXVB

Answer 1

Tldr;

Solution 1: Using Left/Right/Top/Bottom positioning

In order for your div to move, you will need to set a parent element to relative , and the div to absolute positioning. Note, since the html element is the 'top most' element of the html tree, it is automatically assumed this relative position.

 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> 

---

Solution 2: Transforms

Using transforms is great, as you can also add transitions for a smooth effect . Just note you'll need to add just a slight alteration to solution 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> 

Explanation of Solution 2

To allow for transforms, the DOM needs to know the start point, the end point, and the duration explicitly . So hence, the start is set to

top:0; left:0;

To represent the top and left vales.

The 'duration' can be set using the transition property. Here I have set this to 0.4s(econds), but this can be altered to any suitable value.

Lastly, and most crucially, you need to set a definitive end point to your transform. Here you will notice the

top:100%;left:100%; 

However, as I am sure you are aware in doing that it will put the very top left corner at this position, (100%,100%) so to speak. It is hence the reason for the inclusion for the translate to 'move the box back onto the screen'. The translate property takes two values, the X and Y disposition. By using a % as the unit, it will move a % of the size of either the width or height of the box, depending on the axis you are moving it. In other words, using

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

will move the box 100% (of itself) to the left, and 100% (of its height) up, hence it can be seen in the bottom right of the page.

Answer 2

try this

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

I'm on mobile so I hav t tested it but it /should/ work

Answer 3

So you want to move the div to bottom right corner. In your code you are doing

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

so instead of top to be 0, you want bottom to be 0, and instead of left you want right.