rotate()
Turns an element around its center. The unit is degrees (deg). Positive is clockwise.
index.html
HTML
<style>
.row { display: flex; gap: 24px; padding: 24px 12px; }
.box { width: 80px; height: 80px; background: #d94a00; color: #fff; display: grid; place-items: center; font-weight: bold; }
.r1 { transform: rotate(15deg); }
.r2 { transform: rotate(-30deg); background: #1a5276; }
.r3 { transform: rotate(0.5turn); background: #27ae60; }
</style>
<div class="row"><div class="box r1">15°</div><div class="box r2">-30°</div><div class="box r3">half turn</div></div>turn is handy: 1turn is a full circle.
scale()
Makes an element bigger or smaller. 1 is the original size, 2 is double, 0.5 is half.
index.html
HTML
<style>
.row { display: flex; gap: 30px; padding: 30px 12px; }
.box { width: 80px; height: 80px; background: #d94a00; color: #fff; display: grid; place-items: center; font-weight: bold; }
.s1 { transform: scale(1.4); }
.s2 { transform: scale(0.6); background: #1a5276; }
.s3 { transform: scale(1.5, 0.5); background: #27ae60; }
</style>
<div class="row"><div class="box s1">1.4</div><div class="box s2">0.6</div><div class="box s3">1.5, 0.5</div></div>scale(x, y) can stretch the two axes differently. scaleX() and scaleY() change just one.
Combining transforms
Write several functions in one transform, separated by spaces. They are applied from right to left, which matters.
style.css
CSS
.card:hover {
transform: translateY(-4px) rotate(2deg) scale(1.03);
}
warning
Setting transform twice
A second
transform rule replaces the first, it does not add to it. If hover sets transform: scale(1.1) and the element already had rotate(10deg), the rotation is lost unless you repeat it in the hover rule.
info
Scaled text can look soft
Text scaled up with
transform can look slightly soft, because it is stretched rather than redrawn. For permanent size changes, use font-size and width instead.