Assignments for Class 20: CSS Transforms
Assignment 1: Rotate a Box
Task: Create a square box that rotates 90 degrees when hovered.
Solution:
1. HTML:
html
CopyEdit
<div class="box"></div>
2. CSS:
css
CopyEdit
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transition: transform 0.5s;
}
.box:hover {
transform: rotate(90deg);
}
3. Explanation:
o The transform: rotate(90deg) rotates the box by 90 degrees.
o transition ensures smooth rotation on hover.
Assignment 2: Scale an Image
Task: Create an image that doubles in size when hovered.
Solution:
1. HTML:
html
CopyEdit
<img src="example.jpg" alt="Example" class="image">
2. CSS:
css
CopyEdit
.image {
width: 200px;
transition: transform 0.5s;
}
.image:hover {
transform: scale(2);
}
3. Explanation:
o scale(2) doubles the size of the image.
o The transition ensures smooth scaling.
Assignment 3: Translate a Button
Task: Create a button that moves 50px to the right when hovered.
Solution:
1. HTML:
html
CopyEdit
<button class="btn">Hover Me</button>
2. CSS:
css
CopyEdit
.btn {
padding: 10px 20px;
background-color: #2ecc71;
border: none;
color: white;
cursor: pointer;
transition: transform 0.3s;
}
.btn:hover {
transform: translate(50px, 0);
}
3. Explanation:
o translate(50px, 0) shifts the button 50px horizontally.
Assignment 4: Skew a Card
Task: Create a card that skews horizontally by 20 degrees when hovered.
Solution:
1. HTML:
html
CopyEdit
<div class="card">Hover Me</div>
2. CSS:
css
CopyEdit
.card {
width: 200px;
height: 100px;
background-color: #e74c3c;
text-align: center;
line-height: 100px;
color: white;
transition: transform 0.4s;
}
.card:hover {
transform: skew(20deg, 0);
}
3. Explanation:
o skew(20deg, 0) tilts the card horizontally.
Assignment 5: Rotate and Scale on Click
Task: Create a square that rotates 45 degrees and scales up by 1.5x on click.
Solution:
1. HTML:
html
CopyEdit
<div class="square"></div>
2. CSS:
css
CopyEdit
.square {
width: 100px;
height: 100px;
background-color: #9b59b6;
transition: transform 0.3s;
}
.square:active {
transform: rotate(45deg) scale(1.5);
}
3. Explanation:
o :active applies the transform when the square is clicked.
Assignment 6: Create a 3D Flip Effect
Task: Create a box that flips 180 degrees on hover.
Solution:
1. HTML:
html
CopyEdit
<div class="flip-box"></div>
2. CSS:
css
CopyEdit
.flip-box {
width: 100px;
height: 100px;
background-color: #34495e;
transition: transform 0.6s;
}
.flip-box:hover {
transform: rotateY(180deg);
}
3. Explanation:
o rotateY(180deg) creates a 3D flip effect.
Assignment 7: Transform Text with Skew
Task: Create text that skews vertically by 15 degrees on hover.
Solution:
1. HTML:
html
CopyEdit
<h1 class="text">Hover Me</h1>
2. CSS:
css
CopyEdit
.text {
font-size: 24px;
transition: transform 0.5s;
}
.text:hover {
transform: skew(0, 15deg);
}
3. Explanation:
o skew(0, 15deg) tilts the text along the Y-axis.
Assignment 8: Combine Transformations
Task: Create a box that rotates, scales, and translates when hovered.
Solution:
1. HTML:
html
CopyEdit
<div class="combo-box"></div>
2. CSS:
css
CopyEdit
.combo-box {
width: 100px;
height: 100px;
background-color: #e67e22;
transition: transform 0.5s;
}
.combo-box:hover {
transform: rotate(30deg) scale(1.2) translate(20px, 10px);
}
3. Explanation:
o Combines rotation, scaling, and translation for a dynamic effect.
Assignment 9: Transform Circle into an Oval
Task: Transform a circle into an oval when hovered.
Solution:
1. HTML:
html
CopyEdit
<div class="circle"></div>
2. CSS:
css
CopyEdit
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #1abc9c;
transition: transform 0.3s;
}
.circle:hover {
transform: scale(1.5, 1);
}
3. Explanation:
o scale(1.5, 1) stretches the circle horizontally into an oval.
Assignment 10: Animate a Box Path
Task: Create a box that moves in a circular path using transforms.
Solution:
1. HTML:
html
CopyEdit
<div class="path-box"></div>
2. CSS:
css
CopyEdit
@keyframes circular-path {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(50px, 0);
}
50% {
transform: translate(50px, 50px);
}
75% {
transform: translate(0, 50px);
}
100% {
transform: translate(0, 0);
}
}
.path-box {
width: 50px;
height: 50px;
background-color: #c0392b;
animation: circular-path 2s infinite;
}
3. Explanation:
o @keyframes defines the circular path movement using translate.
No comments:
Post a Comment