feat(curriculum): Add interactive examples to css transforms lesson (#63020)

curriculum/challenges/english/blocks/lecture-working-with-css-transforms-overflow-and-filters/672bcc8ccc976fd791610f43.md

@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: what-is-the-css-transform-property
 ---
 
-# --description--
+# --interactive--
 
 The CSS `transform` property is a powerful tool that allows you to modify the visual presentation of elements on your webpage without affecting the layout of other elements. It enables you to apply various transformations to elements such as rotating, scaling, skewing, or translating (moving) them in 2D or 3D space.
 
@@ -13,6 +13,14 @@ The `transform` property works by applying a mathematical transformation to an e
 
 Let's explore some common transform functions. Here's an example of a box element:
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+
+<div class="box"></div>
+```
+
 ```css
 body {
   border: 2px solid black;
@@ -25,10 +33,20 @@ body {
 }
 ```
 
+:::
+
 We have set the `body` to have a solid black border so that you can see the `.box` element nested inside the `body` element.
 
 The `translate` function moves an element from its current position. Here's an updated example using the `translate` function:  
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+
+<div class="box"></div>
+```
+
 ```css
 body {
   border: 2px solid black;
@@ -42,10 +60,20 @@ body {
 }
 ```
 
+:::
+
 This CSS rule will move the element with the class `box` 50 pixels to the right and 100 pixels down from its original position.
 
 The `rotate` function rotates an element around a fixed point and this is an example of using the `rotate` function for the `.box` element from earlier:  
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+
+<div class="box"></div>
+```
+
 ```css
 .box {
   margin: 100px;
@@ -56,10 +84,20 @@ The `rotate` function rotates an element around a fixed point and this is an exa
 }
 ```
 
+:::
+
 This will rotate the element forty five degrees clockwise.
 
 The `scale` function allows you to change the size of an element. Here's an example:  
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+
+<div class="box"></div>
+```
+
 ```css
 .box {
   margin: 100px;
@@ -70,10 +108,20 @@ The `scale` function allows you to change the size of an element. Here's an exam
 }
 ```
 
+:::
+
 This will make the element one and a half times wider and twice as tall as its original size.
 
 You can combine multiple transformations in a single declaration:  
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+
+<div class="box"></div>
+```
+
 ```css
 .box {
   margin: 100px;
@@ -84,6 +132,8 @@ You can combine multiple transformations in a single declaration:
 }
 ```
 
+:::
+
 This will move the element 50 pixels to the right and down, rotate it 45 degrees, and scale it to be one and a half times its original size.
 
 While the `transform` property is powerful for creating visually appealing designs, it's important to consider accessibility when using it. Here are some important accessibility concerns to keep in mind.