Scribd
Upload
12 views22 pages

Transform

The document outlines a lesson on CSS transformations, including definitions and examples of translate, rotate, scale, and skew functions. It provides instructions for an activity where students create a webpage titled '2D Transform Playground' using various 2D transforms on div elements. Additionally, it includes reflective questions to assess learning outcomes.

Uploaded by

drdhonz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 views22 pages

Transform

The document outlines a lesson on CSS transformations, including definitions and examples of translate, rotate, scale, and skew functions. It provides instructions for an activity where students create a webpage titled '2D Transform Playground' using various 2D transforms on div elements. Additionally, it includes reflective questions to assess learning outcomes.

Uploaded by

drdhonz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

Prepared by Mr. Lloyd Jeriel C.

Parayno
Reminders
Review Past Lesson
Review Past Lesson
Review Past Lesson
Transform your hands
Translate: Move your Rotate: Spin your hands
hands left or right around in a circle.

Scale: Stretch your Skew: Tilt your hands


hands wide apart sideways, as if tilting an
and bring them object.
close together.
How do you think these
transformations apply to
web design?
transform
A CSS Property
Dictionary
Definitions from Oxford Languages · Learn more

trans·form
/tran(t)sˈfôrm/ verb

make a thorough or dramatic change in the form,


appearance, or character of.

Similar: transfigure change modify rearrange


In Webites
developer.mozilla.org

trans·form
The transform CSS property lets you rotate, scale, skew, or
translate an element. It allow us to modify elements’
appearance in two-dimensional space (X and Y axes).
X axis - horizontal
Y axis - vertical
transform: translate(x, y)
Moves an element along the X and Y axes.

transform: translate(0px, 0px); transform: translate(150px, 0px); transform: translate(0px, 200px);


transform: rotate(deg)
Rotates an element around its center.

transform: rotate(0deg); transform: rotate(20deg);


transform: scale(x, y)
Resizes an element by scaling its width and height.

transform: scale(1, 1); transform: scale(1.8, 1); transform: scale(1.8, 1.8);


transform: skew(xdeg, ydeg)
Skews an element along the X and Y axes.

transform: skew(0deg, 0deg); transform: skew(35deg, 0deg); transform: skew(0deg, 20deg);


Combining Transform Functions:
Multiple transformations can be applied together.

transform: translate(50px, 50px); transform: translate(50px, 50px) rotate(35deg);


Actual Demonstration
Try it!
ACTIVITY 3.4
(50mins)

1. Create a webpage titled “2D Transform Playground” with the


following requirements:

Include at least 8 div elements (e.g., squares, circles).


Apply different 2D transforms (e.g., rotation, scaling,
translation) to each element.
Use the :hover pseudo-class to activate the
transformations.
Use the :hover pseudo-class to activate the transformations.

2. Save the file as ACTIVITY3.4_SURNAME.html and open it in a


browser.

3. Submit the HTML files with a screenshot of your work.


What are the 3 things that you
learned today?

What are the 2 topics you are


curious about?

What is the 1 lingering


question about the topic?
22

You might also like