7

Technical Vocational
Livelihood
QUARTER

2 Computer Programming

Computer Programming (ICT) – Grade 11

TECHNICAL VOCATIONAL LIVELIHOOD
Quarter 2 – Module 2 CSS Transform methods First Edition, 2020

Republic Act 8293, section 176 states that: No copyright shall subsist in
any work of the Government of the Philippines. However, prior approval of the
government agency or office wherein the work is created shall be necessary for
exploitation of such work for profit. Such agency or office may, among other things,
impose as a condition the payment of royalties.

Borrowed materials (i.e., songs, stories, poems, pictures, photos, brand

names, trademarks, etc.) included in this module are owned by their respective
copyright holders. Every effort has been exerted to locate and seek permission to use
these materials from their respective copyright owners. The publisher and authors
do not represent nor claim ownership over them.

Published by the Department of Education Division of Pasig City

Development Team of the Module

Writer: Jenessy Joy T. Pinga
Editor: Ma.Lerma Cantanero
Reviewer: Rowena O. Dimagiba
Illustrator:
Layout Artist:
Management Team: Ma. Evalou Concepcion A. Agustin
Assistant Schools Division Superintendent
OIC-Schools Division Superintendent
Aurelio G. Alfonso, Ed. D.
OIC-Assistant Schools Division Superintendent
Victor M. Javena, Ed. D.
OIC – Chief Curriculum Implementation Division
Chef School Governance and Operation Division

Education Program Supervisor

Wilma Q. Del Rosario, LRMDS
Dr. Libranda L. Agon, Ed. D., EPP/TLE

Printed in the Philippines by ________________________

Department of Education – Division of Pasig City

Office Address: Caruncho Avenue, San Nicolas, Pasig City

Telefax: 641-88-85 / 682-2819
E-mail Address: [email protected]
 Computer
Programming

Quarter 2
Self Learning Module 2
CSS Transform methods

Writer: Jenessy Joy T. Pinga

Editor: Ma. Lerma Cantanero
Validator/Reviewer: Rowena O. Dimagiba
Introductory Message

For the Facilitator:

Welcome to the Computer Programming for the ICT Module on CSS Transform
methods!

This module was collaboratively designed, developed and reviewed by educators from
Schools Division Office of Pasig City headed by its Officer-In-Charge Schools Division
Superintendent, Ma. Evalou Concepcion A. Agustin in partnership with the Local
Government of Pasig through its mayor, Honorable Victor Ma. Regis N. Sotto.
The writers utilized the standards set by the K to 12 Curriculum using the Most
Essential Learning Competencies (MELC) while overcoming their personal, social,
and economic constraints in schooling.
This learning material hopes to engage the learners into guided and independent
learning activities at their own pace and time. Further, this also aims to help learners
acquire the needed 21st century skills especially the 5 Cs namely: Communication,
Collaboration, Creativity, Critical Thinking and Character while taking into
consideration their needs and circumstances.

In addition to the material in the main text, you will also see this box in the body of
the module:

Notes to the Teacher

This contains helpful tips or strategies that
will help you in guiding the learners.

As a facilitator you are expected to orient the learners on how to use this module.
You also need to keep track of the learners' progress while allowing them to manage
their own learning. Moreover, you are expected to encourage and assist the learners
as they do the tasks included in the module.
For the Learner:

Welcome to the Computer Programming for the ICT Module CSS Transform methods!

The hand is one of the most symbolized part of the human body. It is often used to
depict skill, action and purpose. Through our hands we may learn, create and
accomplish. Hence, the hand in this learning resource signifies that you as a learner
is capable and empowered to successfully achieve the relevant competencies and
skills at your own pace and time. Your academic success lies in your own hands!

This module was designed to provide you with fun and meaningful opportunities for
guided and independent learning at your own pace and time. You will be enabled to
process the contents of the learning material while being an active learner.

This module has the following parts and corresponding icons:

Expectation - These are what you will be able to know after

completing the lessons in the module

Pre-test - This will measure your prior knowledge and the

concepts to be mastered throughout the lesson.

Recap - This section will measure what learnings and skills

that you understand from the previous lesson.

Lesson- This section will discuss the topic for this module.

Activities - This is a set of activities you will perform.

Wrap Up- This section summarizes the concepts and

applications of the lessons.

Valuing-this part will check the integration of values in the

learning competency.

Post-test - This will measure how much you have learned from
the entire module. Ito po ang parts ng module.
 EXPECTATION

At the end of this module the learner is expected to:

• understand CSS transform method.

• perform and apply the use of CSS transform method when designing
webpage.
• cite the importance of transform method in designing webpage.

PRE–TEST

Instruction: Select the letter that corresponds to the correct answer.

1. Method that moves an element from its current position according to

the parameters given for the X-axis and the Y-axis.
A. translate()
B. rotate()
C. scale()
D. skew()

2. Method that increases or decreases the size of an element according to

the parameters given for the width and height.
A. translate()
B. rotate()
C. scale()
D. skewX()

3. Method that rotates an element clockwise or counter-clockwise

according to a given degree..
A. translate()
B. rotate()
C. scale()
D. skewX()

4. Method that skews an element along the X-axis by the given angle.
A. translate()
B. skewY()
C. matrix()
D. skewX()
 5. Method that skews an element along the X and Y-axis by the given
angles.
A. skewXY()
B. scale()
C. skewY()
D. skew()

RECAP
Module 1 discussed the CSS background, color, gradients and shadow now
describe the following below on how you understand the lesson.

• background-clip
• background-image
• background-origin
• background-size
• Linear Gradients
• Radial Gradients
• Box-shadow
• Text-shadow

LESSON

CSS Transforms
Transforms allow us to translate, rotate, scale, and skew elements.

A transformation is an effect that lets an element change shape, size and

position.

CSS 2D Transforms

The following are 2D transformation methods:

• translate()
• rotate()
• scale()
• skewX()
• skewY()
• matrix()
 translate() method allows you to moves an element from its current
position according to the parameters given for the X-axis and the Y-axis.

Example: (to see what happens try it with your PC)

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

rotate() method allows you to rotates an element clockwise or

counter-clockwise according to a given degree.

Example: (to see what happens try it with your PC)

div {transform: rotate(20deg);}

scale() method allows you to increases or decreases the size of an

element according to the parameters given for the width and height.

Example: (to see what happens try it with your PC)

div {transform: scale(2, 3);}

skewX() method allows you to skews an element along the X-

axis by the given angle.

Example: (to see what happens try it with your PC)

div { transform: skewX(5deg);}

 skewY() method allows you to skews an element along the Y-axis by the
given angle.

Example: (to see what happens try it with your PC)

div { transform: skewY(20deg);}

skew() method allows you to skews an element along the X and Y-axis
by the given angles.

Example: (to see what happens try it with your PC)

div { transform: skew(20deg, 10deg);}

matrix() method allows you to combines all the 2D transform

methods into one.

Syntax:

transform: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

Example: (to see what happens try it with your PC)

div { transform: matrix(1, 0, 0.5, 1, 50, 0);}

CSS 3D Transforms

The following are 3D transformation methods:

• rotateX()
• rotateY()
 rotateX() method allows you to rotates an element around its X-
axis at a given degree

Example: (to see what happens try it with your PC)

div { transform: rotateX(150deg);}

rotateY() method allows you to rotates an element around its Y-

axis at a given degree:

Example: (to see what happens try it with your PC)

div { transform: rotateY(130deg);}

ACTIVITIES

Complete the code below according to the given instructions.

<html>
<head>
<style>
div {
width: 100px;
height: 100px;
margin: 50px;
background-color: yellow;
border: 1px solid black;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
1. With the transform property, skew the <div> element 20 degrees along the
X-axis, and 30 degrees along the Y-axis.

2. With the transform property, skew the <div> element 10 degrees along the
X-axis.
 3. With the transform property, move the <div> element 50px to the right,
and 50px down.

4. With the transform property, rotate the <div> element 150deg around its
X-axis.

5. With the transform property, rotate the <div> element 75 degrees.

*Answer the Worksheet number 2 and submit a soft copy/hard copy of your
completed activity to your subject teacher on the following meeting.

WRAP–UP

Instruction: Describe the following below on how you understand the

lesson.

• rotateX()
• rotateY()
• translate()
• rotate()
• scale()
• skewX()
• skewY()
• matrix()

VALUING

Instructions: Read and answer the following questions carefully in two to

three sentences for each number.

1. What do you think is the importance of using CSS Transform?

___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________

2. How will you use the knowledge you acquired in this module?
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________
 POST TEST

Instruction: Select the letter that corresponds to the correct answer.

1. Transform property that allows you to combines all the 2D transform

methods into one.
A. transform: transform()
B. transform: matrix()
C. transform: combine()
D. transform: skew()

2. Transform property that allows you to move the <div> element

according to the parameters given for the X-axis and the Y-axis
A. transform: translate()
B. transform: rotate()
C. transform: scale()
D. transform: skew()

3. Transform property that allows you to increases or decreases the size

of an element according to the parameters given for the width and
height.
A. transform: translate()
B. transform: rotate()
C. transform: scale()
D. transform: skewX()

4. Transform property that allows you to rotates an element rotates an

element around its Y-axis at a given degree
A. transform: translate()
B. transform: rotateY()
C. transform: rotate()
D. transform: skewX()

5. Transform property that allows you to rotates an element according to

given degree
A. transform: translate()
B. transform: rotateY()
C. transform: rotate()
D. transform: rotateX()
Accessed September 7, 2020 1:00pm https://www.tutorialrepublic.com •
Accessed September 7, 2020 11:00Am https://www.w3schools.com •
REFERENCES
Activity
1. transform: skew(20deg, 30deg);
2. transform: skew(10deg);
3. transform: translate(50px,50px);
4. transform: rotateX(150deg);
5. transform: rotate(75deg);
Post-test: Pre-test:
1. B 1. A
2. A 2. C
3. C 3. B
4. B 4. D
5. C 5. D
KEY TO CORRECTION