CSS Transform

By Hemanta Sundaray on 2021-11-09

The transform CSS property let’s us rotate, scale, skew or translate an element.

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="box">SQUARE </div>
</body>
</html>
style.css
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 10px;
  font-family: sans-serif;
}

.box {
  width: 15rem;
  height: 15rem;
  background-color: orangered;
  display: grid;
  place-items: center;
  font-size: 2rem;
  transition: transform, 1s;
}

.box:hover {
  transform: rotate(45deg);
}

translate

.box:hover {
  transform: translate(5rem, 5rem);
}

Translate

scale

.box:hover {
  transform: scale(2, 2);
}

Scale

rotate

.box:hover {
  transform: rotateZ(45deg);
}

Rotate

skew

.box:hover {
  transform: skew(20deg, 20deg);
}

Skew

Multiple transformations at once

.box:hover {
  transform: translate(5rem, 5rem) rotate(45deg) scale(1.3, 1.3);
}

Multiple Transformations

Syntax

transform: rotate(45deg);
transform: rotateX(20deg);
transform: rotateY(20deg);

transform: translate(5rem, 5rem);
transform: translateX(3rem);
transform: translateY(5rem);

transform: scale(2, 1.5);
transform: scaleX(2);
transform: scaleY(0.5);

transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(20deg);

Join the Newsletter