Lecture Notes for Class 20: CSS Transforms
Objective:
Understand and apply 2D and 3D transformations using the transform property in
CSS.
Introduction
to CSS Transforms
CSS transforms allow you to
manipulate elements in 2D or 3D space, enabling changes in position, rotation,
scaling, and skewing.
The transform property is used to apply these transformations, enhancing visual
design and user interaction.
Key
Transform Functions
1. rotate()
o
Rotates an element around a fixed point (usually
its center).
o
Syntax:
css
CopyEdit
transform:
rotate(angle);
o
Examples:
§ rotate(45deg):
Rotates the element by 45 degrees clockwise.
§ rotate(-90deg):
Rotates the element 90 degrees counterclockwise.
2. scale()
o
Scales the size of an element along the X and Y
axes.
o
Syntax:
css
CopyEdit
transform:
scale(scaleX, scaleY);
§ scaleX
scales the width, and scaleY scales the height.
o
Examples:
§ scale(2):
Doubles the size of the element in both directions.
§ scale(1,
0.5): Maintains the width but reduces the height to 50%.
3. translate()
o
Moves an element from its current position without
affecting the layout.
o
Syntax:
css
CopyEdit
transform:
translate(x, y);
§ x moves
the element horizontally, and y moves it vertically.
o
Examples:
§ translate(50px,
0): Moves the element 50px to the right.
§ translate(0,
-30px): Moves the element 30px upwards.
4. skew()
o
Tilts an element along the X and/or Y axes.
o
Syntax:
css
CopyEdit
transform:
skew(x-angle, y-angle);
o
Examples:
§ skew(30deg,
0): Skews the element 30 degrees horizontally.
§ skew(0,
20deg): Skews the element 20 degrees vertically.
Combining
Transforms
You can combine multiple
transform functions for complex effects:
css
CopyEdit
transform:
rotate(45deg) translate(50px, 50px) scale(1.5);
Transformations are applied in
the order they are written.
2D vs. 3D
Transforms
- 2D
Transforms: Operate on a flat plane (X and Y axes).
- 3D
Transforms: Add depth by manipulating the Z-axis.
Examples include rotateX(), rotateY(), and translateZ().
Lab
Exercise: Animated Boxes with Transforms
Objective:
Create animated boxes using the transform property.
1. HTML Code:
html
CopyEdit
<!DOCTYPE
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>CSS Transforms</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="box"></div>
</body>
</html>
2. CSS Code:
css
CopyEdit
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
}
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transition: transform 0.5s ease;
}
.box:hover
{
transform: rotate(45deg) scale(1.5) translate(20px,
20px);
}
Summary
- CSS transform
allows rotating, scaling, translating, and skewing elements.
- Combining
transforms can create advanced effects.
- Adding
transitions enhances user experience.
No comments:
Post a Comment