How do I use ccs transforms to rotate & scale a html element?

hoodedvul

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

HTML.

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

CSS.

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

      .box1:hover {
        transform: roate(360deg);
...

Line 14: The transform method used is rotate.

The result is the box will rotate 360 degrees. Image below is not animated if you try the demo code you will see the box rotating.

Transform also has other methods, another transform method is scale. Scale an element down or up.

We start with our box looking like this.

Changing Line 14: transform: scale(2, 2);

Hovering over the box will scale the box up as seen in the image below.

To scale the box down use negative numbers. for example line 14 would be transform: scale(-1, -1);

W3S has a full list of methods that can be used with transform. https://www.w3schools.com/css/css3_2dtransforms.asp

translate()
rotate()
scaleX()
scaleY()
scale()
skewX()
skewY()
skew()
matrix()