CSS is the skin of a website, but it doesn't have to be static! It could also be responsive, kinetic, and interactive. Today we will be looking at CSS transform, transition, and animation to cast some spells on our website.

We will be using glitch.com for this workshop, but you can also just use any code editor you want.

♣️ CSS Transform

Untitled

Remember how in Adobe After Effects we have these transform properties? Guess what? We have them in CSS as well! CSS transform lets you translate, scale, rotate and skew our elements.

<link rel="stylesheet" href="/style.css" />

Make a red box first!

<div class="box"></div>

.box {
  width: 200px;
  height: 155px;
  background-color: red;
  border: 1px solid black;
}

translate()

Untitled

.box {
  transform: translate(50px, 100px);
}

rotate()

Untitled

.box {
  transform: rotate(20deg);
}

.box {
  transform: rotate(-20deg);
}

scale**()**

Untitled

.box {
/* width, height */
  transform: scale(2, 3);
}

.box {
  transform: scale(0.5, 0.5);
}

skew()