Wednesday, 19 February 2025

Assignments for Class 20: CSS Transforms

 


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

Search This Blog

Powered by Blogger.