HTML & CSS Masterclass Tutorial

Comprehensive guide to modern HTML and CSS development.

Transforms

CSS Transforms

The transform property allows you to visually manipulate elements in 2D or 3D space without affecting the normal document flow.

Common Transform Functions:

translate(x, y): Moves the element from its current position. Very useful for perfect centering.
scale(n): Increases or decreases the size of an element (e.g., 1.5 is 150%).
rotate(deg): Rotates the element clockwise or counter-clockwise (e.g., 45deg).
skew(x, y): Skews the element along the X and Y axes.

Combining transform with transition creates powerful, hardware-accelerated animations!

Try It Yourself

Edit the code below and click Run to see the result live.

Source Code

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: Arial; padding: 50px; background: #ecf0f1; display: flex; justify-content: space-around; flex-wrap: wrap; }
    
    .box {
      width: 150px;
      height: 150px;
      background-color: #e67e22;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: bold;
      font-size: 20px;
      border-radius: 10px;
      transition: transform 0.5s;
    }
    
    .translate-box:hover { transform: translate(30px, -30px); background: #d35400; }
    
    .scale-box:hover { transform: scale(1.3); background: #c0392b; }
    
    .rotate-box:hover { transform: rotate(360deg); background: #8e44ad; }
    
    .combo-box:hover { transform: scale(1.2) rotate(-15deg) translateY(-20px); background: #27ae60; }
  </style>
</head>
<body>

<div class="box translate-box">Translate</div>
  <div class="box scale-box">Scale</div>
  <div class="box rotate-box">Rotate</div>
  <div class="box combo-box">Combo!</div>

</body>
</html>

Result

Topics