CSSmarkup~30 mins

Transform property in CSS - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Create a Rotating and Scaling Box with CSS Transform

📖 Scenario: You want to create a simple webpage that shows a colored box. You want to make the box rotate and scale (grow bigger) using CSS. This is useful for making interactive buttons or fun animations on websites.

🎯 Goal: Build a webpage with a square box that uses the CSS transform property to rotate 45 degrees and scale to 1.5 times its original size.

📋 What You'll Learn

Create an HTML file with a <div> element with class box.

Add CSS to style the box with a background color, width, and height.

Use the CSS transform property to rotate the box by 45 degrees.

Use the CSS transform property to scale the box to 1.5 times its size.

Ensure the transform combines rotation and scaling in one property.

💡 Why This Matters

🌍 Real World

Transformations like rotate and scale are common in web design for buttons, icons, and interactive elements to make websites more engaging.

💼 Career

Knowing how to use CSS transform and Flexbox is essential for front-end developers to create modern, responsive, and accessible user interfaces.

Progress0 / 4 steps

Create the HTML structure with a box

Create an HTML file with a <div> element that has the class box. This will be the colored square on the page.

CSS

Need a hint?

Use a <div> tag with class box inside the <body> tag.

Add basic CSS styles for the box

Add CSS to style the .box class with a background color of #4CAF50, width of 8rem, and height of 8rem. This will make the box visible and square.

CSS




  
  
  Transform Box
  
    .box {
      /* Add background color, width, and height here */
    }

Need a hint?

Use CSS properties background-color, width, and height inside the .box selector.

Apply rotation and scaling using transform

Inside the .box CSS, add the transform property to rotate the box by 45deg and scale it to 1.5 times its size. Combine both transformations in one transform property.

CSS




  
  
  Transform Box
  
    .box {
      background-color: #4CAF50;
      width: 8rem;
      height: 8rem;
      /* Add transform property to rotate 45deg and scale 1.5 */
    }

Need a hint?

Use transform: rotate(45deg) scale(1.5); inside the .box CSS.

Add accessibility and center the box on the page

Add CSS to center the .box horizontally and vertically using Flexbox on the body. Also add aria-label="Rotated and scaled green box" to the <div> with class box for accessibility.

CSS




  
  
  Transform Box
  
    body {
      /* Center content with flexbox */
    }
    .box {
      background-color: #4CAF50;
      width: 8rem;
      height: 8rem;
      transform: rotate(45deg) scale(1.5);
    }

Need a hint?

Use Flexbox on body to center the box. Add aria-label to the div for screen readers.