How do I use css transforms to move an html element?

hoodedvul

Also see: How do I add simple css effects using transitions?

As well as CSS transitions, CSS transforms adds animation effects to HTML elements. In this example a combination is used.

The demo code has a div box which we will move, using a width and a height value.

HTML.

...
<div class="box1">Thinking Inside The Box..</div>
...

CSS.

...
.box1 {
        width: 100px;
        height: 100px;
        background-color: crimson;
        font-size: 20px;
        color: #fff;
        padding: 10px;
        box-sizing: border-box;
        transition: transform 1s;
      }

      .box1:hover {
        transform: translate(100px, 200px);
...

See line 10, 13, &14

From W3S the definition of transitions is: "CSS transitions allows you to change property values smoothly, over a given duration."

On line 10 we specify we want to transition using transform with a delay of 1 second.

Line 13: We want to perform the transform when we hover over the element.
Line 14: We transform using a width and height value.

The elements moves smoothly according to the width and height specified.

From Here:

To Here: