Transform & Transition — Web Development Class 36

Class 036 — Transform & Transition

CSS Transform and Transition are two important CSS features used to create movement, interaction and smooth visual effects on websites.

Transform changes the visual appearance or position of an element.

For example, an element can be:

Moved
Rotated
Scaled
Skewed

Transition controls how smoothly a CSS property changes from one state to another.

A simple example:

.button {
transition: transform 0.2s;
}

.button:hover {
transform: translateY(-2px);
}

When the user hovers over the button, it moves upward by 2px. Because transition is applied, the movement happens smoothly instead of instantly.

In this class, you will learn:

CSS transform
translate()
translateX()
translateY()
scale()
scaleX()
scaleY()
rotate()
skew()
transform-origin
CSS transition
transition-property
transition-duration
transition-timing-function
transition-delay
transition shorthand
Hover transitions
Button effects
Card effects
Image effects
Practical website interactions

LEARNING OBJECTIVES

After completing this class, you will be able to:

Understand CSS Transform.
Understand CSS Transition.
Explain the difference between Transform and Transition.
Move elements using translate().
Resize elements visually using scale().
Rotate elements using rotate().
Create skew effects.
Understand transform-origin.
Create smooth state changes using transition.
Control transition duration.
Use timing functions.
Add transition delay.
Use transition shorthand.
Create practical hover effects.
Build interactive buttons and cards.

WHAT IS CSS TRANSFORM?

The transform property changes the visual coordinate space of an element.

Basic syntax:

selector {
transform: function();
}

Example:

.box {
transform: translateY(-20px);
}

This visually moves the box upward.

COMMON TRANSFORM FUNCTIONS

Some commonly used transform functions are:

translate()

translateX()

translateY()

scale()

scaleX()

scaleY()

rotate()

skew()

skewX()

skewY()

TRANSLATE()

translate() moves an element from its original visual position.

Syntax:

transform: translate(x, y);

Example:

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

This moves the element:

50px horizontally

20px vertically

TRANSLATEX()

translateX() moves an element along the X-axis.

Example:

.box {
transform: translateX(50px);
}

Positive value:

Moves toward the positive X direction.

In a normal left-to-right coordinate system, this visually moves the element to the right.

Negative example:

.box {
transform: translateX(-50px);
}

This moves it toward the negative X direction.

TRANSLATEY()

translateY() moves an element along the Y-axis.

Example:

.box {
transform: translateY(30px);
}

Positive Y values normally move the element downward.

Example:

.box {
transform: translateY(-10px);
}

Negative Y moves it upward.

BUTTON LIFT EFFECT

HTML: Buy Now

CSS:

.button {
padding: 12px 24px;

border: none;

background-color: #2563eb;

color: white;

cursor: pointer;

transition: transform 0.2s;

}

.button:hover {
transform: translateY(-3px);
}

The button moves slightly upward on hover.

SCALE()

scale() changes the visual size of an element.

Example:

.box {
transform: scale(1.2);
}

1 means:

Original scale.

1.2 means:

120% of the original scale.

0.8 means:

80% of the original scale.

SCALE EXAMPLE

.image {
transform: scale(1.1);
}

The image appears larger.

SCALE DOWN

.button:active {
transform: scale(0.96);
}

This can create a pressed-button effect.

SCALEX()

Example:

.box {
transform: scaleX(1.5);
}

This scales the element horizontally.

SCALEY()

Example:

.box {
transform: scaleY(1.5);
}

This scales the element vertically.

IMAGE ZOOM EFFECT

HTML:

<img
    src="product.jpg"
    alt="Product"
>

CSS:

.image-box {
overflow: hidden;
}

.image-box img {
display: block;

width: 100%;

transition: transform 0.3s;

}

.image-box:hover img {
transform: scale(1.1);
}

The image smoothly zooms when the container is hovered.

ROTATE()

rotate() rotates an element.

Example:

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

deg means:

Degree

Positive angles generally rotate clockwise in the usual screen coordinate system.

Example:

.icon {
transform: rotate(180deg);
}

NEGATIVE ROTATION

Example:

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

This rotates in the opposite direction.

ROTATING ICON EXAMPLE

HTML: →

CSS:

.arrow {
display: inline-block;

transition: transform 0.3s;

}

.button:hover .arrow {
transform: rotate(90deg);
}

SKEW()

skew() tilts an element.

Example:

.box {
transform: skew(15deg);
}

You can also define X and Y angles:

.box {
transform: skew(15deg, 5deg);
}

SKEWX()

Example:

.box {
transform: skewX(15deg);
}

SKEWY()

Example:

.box {
transform: skewY(10deg);
}

COMBINING MULTIPLE TRANSFORMS

Multiple transform functions can be used in one declaration.

Example:

.card:hover {
transform:
translateY(-5px)
scale(1.02);
}

This:

Moves the card upward.

And:

Slightly enlarges it.

IMPORTANT

Do not write:

.card {
transform: translateY(-5px);
transform: scale(1.02);
}

The second transform declaration replaces the first one.

Correct:

.card {
transform:
translateY(-5px)
scale(1.02);
}

TRANSFORM ORDER MATTERS

Transform functions are applied in sequence.

For example:

transform:
translateX(50px)
rotate(20deg);

and:

transform:
rotate(20deg)
translateX(50px);

can produce different results.

Therefore, the order of transform functions matters.

TRANSFORM-ORIGIN

transform-origin controls the point around which transformations such as rotation and scaling occur.

Default:

transform-origin: center;

Example:

.box {
transform-origin: top left;

transform: rotate(20deg);

}

Another example:

.box {
transform-origin: center bottom;
}

WHAT IS CSS TRANSITION?

Without transition, many CSS state changes happen immediately.

Example:

.button {
background-color: blue;
}

.button:hover {
background-color: red;
}

The color changes immediately.

With transition:

.button {
background-color: blue;

transition:
    background-color 0.3s;

}

.button:hover {
background-color: red;
}

Now the browser interpolates the supported property change over 0.3 seconds.

TRANSITION SYNTAX

Basic shorthand:

transition:
property duration timing-function delay;

Example:

.button {
transition:
background-color
0.3s
ease
0s;
}

TRANSITION-PROPERTY

transition-property defines which CSS property should transition.

Example:

.button {
transition-property:
background-color;
}

Another example:

.card {
transition-property:
transform;
}

MULTIPLE PROPERTIES

Example:

.card {
transition-property:
transform,
box-shadow;
}

TRANSITION-DURATION

transition-duration defines how long the transition takes.

Example:

.box {
transition-duration: 0.5s;
}

Common units:

s = seconds

ms = milliseconds

Examples:

0.3s

500ms

1000ms equals:

TRANSITION-TIMING-FUNCTION

transition-timing-function controls how the intermediate values progress during the transition.

Common values:

ease

linear

ease-in

ease-out

ease-in-out

EASE

Example:

.box {
transition-timing-function: ease;
}

ease starts relatively slowly, speeds up, and then slows toward the end according to its predefined timing curve.

LINEAR

Example:

.box {
transition-timing-function: linear;
}

The transition progresses at a constant rate.

EASE-IN

Example:

.box {
transition-timing-function: ease-in;
}

The transition starts slowly and accelerates.

EASE-OUT

Example:

.box {
transition-timing-function: ease-out;
}

The transition starts faster and slows toward the end.

EASE-IN-OUT

Example:

.box {
transition-timing-function:
ease-in-out;
}

The transition has slower portions around the beginning and end.

TRANSITION-DELAY

transition-delay controls how long the browser waits before starting the transition.

Example:

.box {
transition-delay: 0.5s;
}

This means the transition begins after a half-second delay.

TRANSITION SHORTHAND

Instead of:

.button {
transition-property:
background-color;

transition-duration:
    0.3s;

transition-timing-function:
    ease;

transition-delay:
    0s;

}

You can write:

.button {
transition:
background-color 0.3s ease;
}

TRANSFORM WITH TRANSITION

This is one of the most common combinations.

Example:

.card {
transition:
transform 0.3s ease;
}

.card:hover {
transform:
translateY(-5px);
}

Transform determines:

WHAT changes visually.

Transition determines:

HOW the property change occurs over time.

TRANSFORM VS TRANSITION

TRANSFORM

Used to transform the element visually.

Examples:

Move

Scale

Rotate

Skew

TRANSITION

Used to smoothly interpolate a CSS property from one state to another over a duration.

Example:

.card {
transition:
transform 0.3s ease;
}

.card:hover {
transform:
translateY(-5px);
}

Here:

transform = visual transformation

transition = smooth change

PRACTICAL BUTTON EFFECT

HTML: Learn More

CSS:

.btn {
padding: 12px 24px;

border: none;

border-radius: 8px;

background-color: #2563eb;

color: white;

cursor: pointer;

transition:
    transform 0.2s ease,
    background-color 0.2s ease;

}

.btn:hover {
transform:
translateY(-3px);

background-color:
    #1d4ed8;

}

.btn:active {
transform:
scale(0.96);
}

PRACTICAL CARD EFFECT

HTML:

<h2>
    Web Development
</h2>

<p>
    Learn HTML, CSS and JavaScript.
</p>

CSS:

.card {
padding: 30px;

border: 1px solid #dddddd;

border-radius: 12px;

transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;

}

.card:hover {
transform:
translateY(-8px);

box-shadow:
    0 15px 30px
    rgba(0, 0, 0, 0.15);

}

PRACTICAL PRODUCT IMAGE

HTML:

<div class="product-image">

    <img
        src="laptop.jpg"
        alt="Laptop"
    >

</div>

<h2>
    Laptop
</h2>

CSS:

.product-image {
overflow: hidden;
}

.product-image img {
display: block;

width: 100%;

transition:
    transform 0.4s ease;

}

.product:hover img {
transform:
scale(1.08);
}

SMOOTH NAVIGATION UNDERLINE

HTML: Home

CSS:

.nav-link {
position: relative;

text-decoration: none;

color: #111827;

}

.nav-link::after {
content: “”;

position: absolute;

left: 0;
bottom: -5px;

width: 100%;
height: 2px;

background-color: #2563eb;

transform: scaleX(0);

transform-origin: left;

transition:
    transform 0.3s ease;

}

.nav-link:hover::after {
transform: scaleX(1);
}

This combines concepts from:

Pseudo-elements

Transform

Transition

TRANSITION MULTIPLE PROPERTIES

Example:

.card {
transition:
transform 0.3s ease,
box-shadow 0.3s ease,
background-color 0.3s ease;
}

.card:hover {
transform:
translateY(-5px);

box-shadow:
    0 10px 25px
    rgba(0, 0, 0, 0.15);

background-color:
    #f8fafc;

}

TRANSITION: ALL

You may see:

.element {
transition:
all 0.3s ease;
}

This tells the browser to transition all animatable properties that change.

However, in production code, it is usually better to specify the properties you actually intend to animate.

Example:

.element {
transition:
transform 0.3s ease,
opacity 0.3s ease;
}

WHY AVOID TRANSITION: ALL?

Specifying properties makes the intended behavior clearer.

It can also prevent unrelated property changes from unexpectedly transitioning.

OPACITY TRANSITION

Example:

.message {
opacity: 0.5;

transition:
    opacity 0.3s ease;

}

.message:hover {
opacity: 1;
}

TRANSFORM PERFORMANCE

Transform and opacity are commonly good choices for smooth UI motion.

Example:

.card {
transition:
transform 0.3s ease,
opacity 0.3s ease;
}

Avoid creating unnecessary or excessive motion.

Performance still depends on the page, browser, device and effect being used.

ACCESSIBILITY AND MOTION

Animations and transitions should be purposeful.

Some users prefer reduced motion.

CSS provides:

prefers-reduced-motion

Example:

.card {
transition:
transform 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {

.card {
    transition: none;
}

}

This can help respect the user’s reduced-motion preference.

COMPLETE PRACTICAL EXAMPLE

HTML:

<meta charset="UTF-8">

<meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
>

<title>
    Transform and Transition
</title>

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

<section class="products">

    <article class="product-card">

        <div class="product-image">

            <img
                src="laptop.jpg"
                alt="Laptop"
            >

        </div>

        <h2>
            Laptop
        </h2>

        <p>
            Professional laptop for web development.
        </p>

        <button>
            View Product
        </button>

    </article>


    <article class="product-card">

        <div class="product-image">

            <img
                src="desktop.jpg"
                alt="Desktop Computer"
            >

        </div>

        <h2>
            Desktop PC
        </h2>

        <p>
            Powerful computer for professional work.
        </p>

        <button>
            View Product
        </button>

    </article>

</section>

CSS:

{
box-sizing: border-box;
}

body {
margin: 0;

font-family:
    Arial,
    sans-serif;

}

.products {
display: grid;

grid-template-columns:
    repeat(
        auto-fit,
        minmax(250px, 1fr)
    );

gap: 24px;

padding: 60px 5%;

}

.product-card {
overflow: hidden;

padding: 20px;

border: 1px solid #dddddd;

border-radius: 12px;

transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;

}

.product-card:hover {
transform:
translateY(-6px);

box-shadow:
    0 15px 30px
    rgba(0, 0, 0, 0.15);

}

.product-image {
overflow: hidden;

border-radius: 8px;

}

.product-image img {
display: block;

width: 100%;

transition:
    transform 0.4s ease;

}

.product-card:hover img {
transform:
scale(1.08);
}

.product-card button {
padding: 12px 20px;

border: none;

border-radius: 6px;

background-color: #2563eb;

color: white;

cursor: pointer;

transition:
    transform 0.2s ease,
    background-color 0.2s ease;

}

.product-card button:hover {
transform:
translateY(-2px);

background-color:
    #1d4ed8;

}

.product-card button:active {
transform:
scale(0.96);
}

@media (prefers-reduced-motion: reduce) {

.product-card,
.product-image img,
.product-card button {
    transition: none;
}

}

CODE EXPLANATION

.product-card {
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}

This tells the browser to smoothly transition changes to transform and box-shadow.

.product-card:hover {
transform:
translateY(-6px);
}

When hovered, the card visually moves upward.

.product-image img {
transition:
transform 0.4s ease;
}

This prepares the image’s transform property for a smooth state change.

.product-card:hover img {
transform:
scale(1.08);
}

The image becomes visually larger when the card is hovered.

.product-card button:active {
transform:
scale(0.96);
}

The button becomes slightly smaller while activated, producing a pressed effect.

COMMON MISTAKES

CONFUSING TRANSFORM AND TRANSITION

Wrong idea:

Transform and Transition are the same thing.

Correct:

Transform changes the element visually.

Transition controls how a property change progresses between states.

USING MULTIPLE TRANSFORM DECLARATIONS

Wrong:

.box {
transform:
translateY(-5px);

transform:
    scale(1.1);

}

The second declaration replaces the first.

Correct:

.box {
transform:
translateY(-5px)
scale(1.1);
}

FORGETTING TRANSITION DURATION

Example:

transition:
transform;

Without a duration, the default transition duration is 0s, so there is no visible transition.

Better:

transition:
transform 0.3s ease;

APPLYING TRANSITION ONLY ON :HOVER

Less useful:

.card:hover {
transition:
transform 0.3s;

transform:
    translateY(-5px);

}

When the pointer leaves, the reverse change may not use the transition as expected because the transition declaration is no longer applied.

Better:

.card {
transition:
transform 0.3s;
}

.card:hover {
transform:
translateY(-5px);
}

USING TRANSITION: ALL WITHOUT A REASON

Prefer:

transition:
transform 0.3s,
opacity 0.3s;

when those are the properties you intend to transition.

MAKING MOTION TOO LONG

For small UI interactions, very long transitions can make the interface feel slow.

Use duration according to the purpose of the interaction.

USING TOO MUCH MOTION

Not every element needs to move.

Motion should help interaction and visual feedback rather than distract users.

IGNORING REDUCED-MOTION PREFERENCES

Consider:

@media (prefers-reduced-motion: reduce)

for interfaces containing meaningful motion.

FORGETTING TRANSFORM ORDER

The order of transform functions can change the result.

USING TRANSFORM TO CHANGE DOCUMENT FLOW

Transforms change visual rendering but generally do not cause surrounding normal-flow elements to rearrange around the transformed visual position.

Use normal layout properties when you actually need to change page layout.

NEW & DIFFICULT WORDS

CSS = Cascading Style Sheets.

Transform = CSS property used to visually transform an element.

Transition = CSS feature used to interpolate supported property changes over time.

Translate = Move an element along an axis.

Scale = Change the visual size of an element.

Rotate = Turn an element around a transform origin.

Skew = Slant an element.

X-axis = Horizontal axis.

Y-axis = Vertical axis.

Degree = Unit used for angles, written as deg.

Transform Origin = Point around which a transformation is applied.

Transition Property = Property specifying which CSS property should transition.

Transition Duration = Length of time a transition takes.

Timing Function = Function controlling the rate of change during a transition.

Transition Delay = Waiting time before a transition begins.

Hover = State when a pointing device designates an element.

Opacity = Degree of transparency of an element.

Reduced Motion = User preference indicating that non-essential motion should be reduced.

Performance = How efficiently and smoothly a website or application operates.

IMPORTANT NOTES

Move:

transform:
translateX(20px);

Move upward:

transform:
translateY(-5px);

Scale:

transform:
scale(1.1);

Rotate:

transform:
rotate(45deg);

Combine:

transform:
translateY(-5px)
scale(1.05);

Smooth transform:

transition:
transform 0.3s ease;

Multiple transitions:

transition:
transform 0.3s ease,
opacity 0.3s ease;

Basic hover effect:

.button {
transition:
transform 0.2s;
}

.button:hover {
transform:
translateY(-2px);
}

Remember:

Transform
= What visual transformation happens

Transition
= How a supported property change progresses over time

PRACTICE

Create a box and use translateX().
Test translateY().
Test translate() with X and Y values.
Scale an element to 1.2.
Scale an element to 0.8.
Rotate an element 45deg.
Rotate an element -20deg.
Test skew().
Combine translate() and scale().
Change transform function order and compare the result.
Test transform-origin.
Create a transition for background-color.
Create a transition for transform.
Test 0.2s, 0.5s and 1s durations.
Compare ease and linear.
Test ease-in.
Test ease-out.
Test ease-in-out.
Add transition-delay.
Create a button lift effect.
Create a card hover effect.
Create an image zoom effect.
Create a rotating icon.
Create a smooth navigation underline.
Test prefers-reduced-motion.

ASSIGNMENT

Create a webpage called:

Transform & Transition Practice

The webpage should contain:

Header
Navigation
Hero section
Buttons
Product cards
Product images
Service cards
Footer

Requirements:

Use translate().
Use translateX() or translateY().
Use scale().
Use rotate().
Use at least one skew effect.
Combine multiple transform functions.
Use transform-origin.
Use transition-property.
Use transition-duration.
Use transition-timing-function.
Use transition-delay.
Use transition shorthand.
Create a button hover effect.
Create a card hover effect.
Create an image zoom effect.
Create at least one active button effect.

MINI PROJECT

Create a professional interactive product card.

HTML:

<div class="product-image">

    <img
        src="product.jpg"
        alt="Product"
    >

</div>

<h2>
    Professional Laptop
</h2>

<p>
    Powerful laptop for professional users.
</p>

<button>
    View Product
</button>

CSS:

.product-card {
overflow: hidden;

padding: 24px;

border: 1px solid #dddddd;

border-radius: 12px;

transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;

}

.product-card:hover {
transform:
translateY(-6px);

box-shadow:
    0 15px 30px
    rgba(0, 0, 0, 0.15);

}

.product-image {
overflow: hidden;
}

.product-image img {
display: block;

width: 100%;

transition:
    transform 0.4s ease;

}

.product-card:hover img {
transform:
scale(1.08);
}

.product-card button {
padding: 12px 20px;

border: none;

background-color: #2563eb;

color: white;

cursor: pointer;

transition:
    transform 0.2s ease;

}

.product-card button:hover {
transform:
translateY(-2px);
}

.product-card button:active {
transform:
scale(0.96);
}

QUIZ

What is CSS Transform?

Answer:

CSS Transform visually transforms an element by moving, scaling, rotating or skewing it.

What is CSS Transition?

Answer:

CSS Transition controls how supported CSS property values change over a specified duration.

What does translate() do?

Answer:

It moves an element along the X and/or Y axes.

What does scale() do?

Answer:

It changes the visual scale of an element.

What does rotate() do?

Answer:

It rotates an element around its transform origin.

What unit is commonly used with rotate()?

Answer:

deg

What does transform-origin control?

Answer:

It controls the origin point used for transformations.

What does transition-duration control?

Answer:

It defines how long the transition takes.

What does transition-delay do?

Answer:

It defines how long the browser waits before starting a transition.

What is a transition timing function?

Answer:

It controls the rate at which intermediate values progress during the transition.

What does this code do?

.button {
transition:
transform 0.2s;
}

.button:hover {
transform:
translateY(-2px);
}

Answer:

It smoothly moves the button upward by 2px when the button enters the hover state.

Can multiple transform functions be combined?

Answer:

Yes.

Example:

transform:
translateY(-5px)
scale(1.05);

Does transform function order matter?

Answer:

Yes. Different orders can produce different results.

Why should transition normally be placed on the base element rather than only :hover?

Answer:

So the transition remains defined both when entering and leaving the changed state.

INTERVIEW QUESTIONS

Q: What is the difference between transform and transition?

Answer:

Transform defines a visual transformation such as moving, scaling or rotating an element. Transition defines how a supported property change progresses from one state to another over time.

Q: What does translate() do?

Answer:

translate() moves an element along the X and/or Y axes.

Q: What does scale() do?

Answer:

scale() changes the visual size of an element.

Q: What does rotate() do?

Answer:

rotate() rotates an element around its transform origin.

Q: What is transform-origin?

Answer:

transform-origin defines the origin point used by transformations such as rotate and scale.

Q: What is transition-property?

Answer:

It specifies which CSS properties should participate in a transition.

Q: What is transition-duration?

Answer:

It specifies how long a transition takes.

Q: What is transition-timing-function?

Answer:

It controls the progression curve of the transition.

Q: What is transition-delay?

Answer:

It specifies how long to wait before a transition starts.

Q: Give a practical Transform & Transition example.

Answer:

A product card can move slightly upward using translateY() and smoothly change its box-shadow when the user hovers over it.

CLASS SUMMARY

In Class 36, you learned CSS Transform & Transition.

You learned:

transform
translate()
translateX()
translateY()
scale()
scaleX()
scaleY()
rotate()
skew()
transform-origin
Combining transforms
Transform order
transition
transition-property
transition-duration
transition-timing-function
transition-delay
Transition shorthand
Button hover effects
Card hover effects
Image zoom effects
Reduced-motion considerations

The file’s core example for this class is:

.button {
transition: transform .2s;
}

.button:hover {
transform: translateY(-2px);
}

Transform changes the element using techniques such as translate, scale and rotate, while Transition makes a state change smooth. :contentReference[oaicite:0]{index=0}

NEXT CLASS:

Class 037 — CSS Animation & Keyframes

Leave a Reply Cancel reply