Scribd
Upload
10 views

66fba5ebabcf0_Assignment_FE_Advanced_CSS3_Transforms_3.2.pdf_1727768043

This assignment focuses on enhancing understanding of CSS3 concepts, particularly transitions and transformations, through practical tasks. Students are required to create an HTML file implementing various CSS styles and effects, including hover transitions and animations. The assignment emphasizes the importance of practice and offers guidance for completing the tasks effectively within 2-5 days.

Uploaded by

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

66fba5ebabcf0_Assignment_FE_Advanced_CSS3_Transforms_3.2.pdf_1727768043

This assignment focuses on enhancing understanding of CSS3 concepts, particularly transitions and transformations, through practical tasks. Students are required to create an HTML file implementing various CSS styles and effects, including hover transitions and animations. The assignment emphasizes the importance of practice and offers guidance for completing the tasks effectively within 2-5 days.

Uploaded by

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

Introduction to CSS3 : Assignment

This assignment serves as practice to strengthen your understanding of key


concepts. Ensure you finish it on time and reach out to the trainer or management if
you have any questions. Consistent practice is essential for mastering these skills.
Although this isn't part of the formal training, it will equip you for real-world
technical challenges.

Assignment Completion Days:


- 2- 5 days

Assignment > Introduction to CSS3 : Advanced CSS3: Transforms

Understanding 2D Transforms & 3.3.2 Exploring 3D


Transforms
Overview:

In this task, you will explore how to use Transform to create a structured layout that
adapts seamlessly to different screen sizes.

Set Up:

• Open a text editor (e.g., Visual Studio Code) and create a file named transform.html.
• Add Heading for Transitions: Use an <h1> tag to introduce CSS3 transitions.
• Create a Div for Transition: Add a <div> with the class box for the transition
example.
• Add Heading for Transformations: Use another <h1> tag to introduce CSS3
transformations.

Create Divs for Transformations: Add multiple <div> elements with classes translate,
rotate, scale, and skew for the transformation examples.

Style the Boxes with CSS

1. Define Common Box Styles: Use a CSS rule for the .box class to set initial width,
height, and background color.
o Example: width: 100px; height: 100px; background-color: #3498db;
2. Add Transition Effects: Add a transition property to the .box class to animate the
background color and width when hovered.
o Example: transition: background-color 0.5s ease, width 1s;
3. Create Hover Effect for Transition Box: Add a .box:hover rule to change the
background color and width on hover.

Example: background-color: #2ecc71; width: 200px;


pg. 1
Excel PTP Solutions, 4th floor, Sunrise Avenue, Nr. Nishi Hospital, SP Stadium to commerce road, Navrangpura,
Ahmedabad – 380009. PH : 079 26400298/698, Email : info@excelptp.com | www.excelptp.com
Style the Transformations

1. Define Additional Box Styles: Create specific styles for .translate, .rotate, .scale, and
.skew classes to apply transformations.
o Example for translate: .box.translate { transform: translateX(100px); }
2. Add Transition to Transformations: Include a transition property for smooth
transformations in the .box class.
o Example: transition: transform 0.5s;
3. Style for Each Transformation: Define how each transformation should appear
when the respective class is applied:
o Rotate: .box.rotate { transform: rotate(45deg); }
o Scale: .box.scale { transform: scale(1.5); }
o Skew: .box.skew { transform: skew(20deg); }

Review and Save:

• Ensure all elements are correctly implemented, then save your file.

View and Submit:

• Open your HTML file in a web browser to check the output and submit as instructed.

Practice Work:

pg. 2
Excel PTP Solutions, 4th floor, Sunrise Avenue, Nr. Nishi Hospital, SP Stadium to commerce road, Navrangpura,
Ahmedabad – 380009. PH : 079 26400298/698, Email : info@excelptp.com | www.excelptp.com
Advanced CSS3: Transitions & Animations

Transition Basics:

• Create a button with smooth color and size transitions on hover using the transition
property.

pg. 3
Excel PTP Solutions, 4th floor, Sunrise Avenue, Nr. Nishi Hospital, SP Stadium to commerce road, Navrangpura,
Ahmedabad – 380009. PH : 079 26400298/698, Email : info@excelptp.com | www.excelptp.com
Use transition-property, transition-duration, and transition-timing-function to control how the
button changes.

Keyframe Animations:

• Define a spinning loader using @keyframes for continuous rotation.


• Apply animation-name, animation-duration, and animation-iteration-count to control
the loader's animation.

Combining Transitions and Animations:

• Create a modal that fades in using a transition when opened.


• Add a hover effect on an element using both transitions (color change) and keyframe
animations (bouncing effect) for a more sophisticated interaction.

Breakdown:

1. Button with Transition:


o The button will change color and slightly increase in size when hovered over,
creating a smooth and interactive effect.
2. Spinning Loader with Keyframe Animation:
o The loader will spin infinitely using a keyframe animation that rotates the
element continuously.
3. Modal with Fade-in Transition:
o The modal will smoothly fade in and move up when activated, using both
opacity and transform transitions for a polished effect.
4. Bouncing Hover Box with Combined Transition and Animation:
o The box will change color and have a bounce animation when hovered over,
combining transitions with keyframe animations for more complex
interactions.

Similar to that is the task below- - - div animation

pg. 4
Excel PTP Solutions, 4th floor, Sunrise Avenue, Nr. Nishi Hospital, SP Stadium to commerce road, Navrangpura,
Ahmedabad – 380009. PH : 079 26400298/698, Email : info@excelptp.com | www.excelptp.com
General Tips: You can also find more interview questions/practical work on the internet related to various
modules and sections to build a clear understanding of the concepts. This will help you confidently approach
and successfully clear interview rounds. We may conduct surprise Q&A sessions, both in groups and individually,
to check your progress. So, be prepared and keep up with your studies as the workload increases module by
module.

***

pg. 5
Excel PTP Solutions, 4th floor, Sunrise Avenue, Nr. Nishi Hospital, SP Stadium to commerce road, Navrangpura,
Ahmedabad – 380009. PH : 079 26400298/698, Email : info@excelptp.com | www.excelptp.com

You might also like