Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda Challenge: Apply Scaling & Rotation | Transforming Elements with CSS
Advanced CSS Techniques
course content

Conteúdo do Curso

Advanced CSS Techniques

Advanced CSS Techniques

1. Getting Started with Advanced CSS
2. Mastering CSS Positioning
3. Creating Smooth Transitions in CSS
4. Advanced CSS Animations
5. Transforming Elements with CSS
6. Responsive Web Design in CSS
7. CSS Preprocessors and Sass

book
Challenge: Apply Scaling & Rotation

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

copy
  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

copy

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 5. Capítulo 4
We're sorry to hear that something went wrong. What happened?
some-alt