Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Challenge: Adding Scaling & Rotating | Transformations
Advanced CSS Techniques

Challenge: Adding Scaling & RotatingChallenge: Adding Scaling & Rotating

Task

Create an engaging online shop card for electronics, where each card includes an image, name, and price. The task is to enhance the visual appeal by incorporating the following animations:

  1. Scaling Image: Utilize the increaseImageSize keyframes rule to add a scaling effect to the image element, making it 20% larger. The final result should be scale(1.2).
  2. Rotating Price: Implement the rotatePrice keyframes rule to add a rotation effect to the price element, completing one full circle. The final result should be rotate(360deg).

Use the predefined keyframes rules.

html

index.html

css

index.css

js

index.js

  1. For the scaling animation:
    • At the start (0% spot), use scale(1) to maintain the original size;
    • At the midpoint (50% spot), increase the size to scale(1.1);
    • At the end (100% spot), increase the size to scale(1.2).
  2. For the rotation animation:
    • At the beginning (0% spot), keep the rotation angle at rotate(0deg);
    • At the midpoint (50% spot), rotate halfway to rotate(180deg);
    • At the end (100% spot), complete the rotation with rotate(360deg).
html

index.html

css

index.css

js

index.js

Все було зрозуміло?

Секція 5. Розділ 4
course content

Зміст курсу

Advanced CSS Techniques

1. Introduction

Course OverviewCourse FocusCourse TopicsHow to Succeed

2. Item Positioning

What is Positioning?Relative PositioningChallenge: Relative PositioningAbsolute PositioningChallenge: Absolute PositioningFixed PositioningChallenge: Fixed PositioningSticky PositioningChallenge: Sticky PositioningStacking OrderChallenge: Stacking OrderContent Overflow

3. Transitions

What is Transition?Selecting Transition PropertyTransition DurationTransition Time FunctionTransition Time DelayTransition CombinationChallenge: Adding Transition

4. Animations

What is Animation?Specifying Time of the AnimationControlling Animation Play Quantity and DirectionManaging Animation StateAnimation CompositionChallenge: Adding Animation

5. Transformations

What is Transformation?ScalingRotatingChallenge: Adding Scaling & RotatingTranslateSkewingPerspectiveChallenge: Adding Translating and Skewing

6. Adaptive/responsive websites and apps

What is Adaptive/Responsive Design?@media QueryAdaptive - Responsive layoutsInspecting the Web PageChallenge: Inspecting Adaptive/Responsive Layout

7. Preprocessors

What is Preprocessor?Sass SyntaxSass VariablesSass Numeric OperatorsSass Nesting@extend DirectiveFolder-File Structure

Advanced CSS Techniques

Challenge: Adding Scaling & RotatingChallenge: Adding Scaling & Rotating

Task

Create an engaging online shop card for electronics, where each card includes an image, name, and price. The task is to enhance the visual appeal by incorporating the following animations:

  1. Scaling Image: Utilize the increaseImageSize keyframes rule to add a scaling effect to the image element, making it 20% larger. The final result should be scale(1.2).
  2. Rotating Price: Implement the rotatePrice keyframes rule to add a rotation effect to the price element, completing one full circle. The final result should be rotate(360deg).

Use the predefined keyframes rules.

html

index.html

css

index.css

js

index.js

  1. For the scaling animation:
    • At the start (0% spot), use scale(1) to maintain the original size;
    • At the midpoint (50% spot), increase the size to scale(1.1);
    • At the end (100% spot), increase the size to scale(1.2).
  2. For the rotation animation:
    • At the beginning (0% spot), keep the rotation angle at rotate(0deg);
    • At the midpoint (50% spot), rotate halfway to rotate(180deg);
    • At the end (100% spot), complete the rotation with rotate(360deg).
html

index.html

css

index.css

js

index.js

Все було зрозуміло?

Секція 5. Розділ 4
some-alt