Scribd
Upload
19 views1 page

Q4 Activity#1

The document is an HTML file that demonstrates various CSS transformations using styled boxes. It includes examples of translate, skew, scale, matrix, and rotate transformations applied to div elements. Each transformation is visually represented in a box with specific styles and effects.

Uploaded by

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

Q4 Activity#1

The document is an HTML file that demonstrates various CSS transformations using styled boxes. It includes examples of translate, skew, scale, matrix, and rotate transformations applied to div elements. Each transformation is visually represented in a box with specific styles and effects.

Uploaded by

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

Q4-Activity#1

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Transform Examples</title>
<link rel="stylesheet" href="styles.css">
<style>
.box {
display: inline-block;
width: 100px;
height: 100px;
margin: 10px;
background-color: lightpink;
text-align: center;
line-height: 100px;
font-weight: bold;
border-style: double;
}
.translate {
transform: translate(25px);
}
.skew {
transform: skew(20deg, 10deg);
}
.scale {
transform: scale(1.3);
}
.matrix {
transform: matrix(1, 0.5, -0.5, 1, 20, 10);
}
.rotate {
transform: rotate(145deg);
}
</style>
</head>
<body>
<div class="box translate">Translate</div>
<div class="box skew">Skew</div>
<div class="box scale">Scale</div>
<div class="box matrix">Matrix</div>
<div class="box rotate">Rotate</div>
</body>
</html>

You might also like