diff --git a/files/en-us/web/css/rotate/index.md b/files/en-us/web/css/rotate/index.md
index fe5d9e97915e1d8..d7e3e44af3f2d49 100644
--- a/files/en-us/web/css/rotate/index.md
+++ b/files/en-us/web/css/rotate/index.md
@@ -18,6 +18,8 @@ browser-compat: css.properties.rotate
 
 The **`rotate`** [CSS](/en-US/docs/Web/CSS) property allows you to specify rotation transforms individually and independently of the {{CSSxRef("transform")}} property. This maps better to typical user interface usage, and saves having to remember the exact order of transform functions to specify in the `transform` property.
 
+{{EmbedInteractiveExample("pages/css/rotate.html")}}
+
 ## Syntax
 
 ```css
@@ -66,53 +68,48 @@ rotate: unset;
 
 ## Examples
 
-### Rotate an element on hover
+### Rotating an element on hover
+
+The following example shows how to use the `rotate` property to rotate an element along various axes on hover.
+The first box rotates 90 degrees on the Z axis hover, the second rotates 180 degrees on the Y axis on hover, and the third rotates 360 degrees on hover around a vector defined by coordinates.
 
 #### HTML
 
 ```html
-<div>
-  <p class="rotate">Rotation</p>
-</div>
+<div class="box" id="box1">rotate Z</div>
+<div class="box" id="box2">rotate Y</div>
+<div class="box" id="box3">vector & angle</div>
 ```
 
 #### CSS
 
 ```css
-* {
-  box-sizing: border-box;
-}
-
-html {
-  font-family: sans-serif;
-}
-
-div {
-  width: 150px;
-  margin: 0 auto;
+.box {
+  display: inline-block;
+  margin: 1em;
+  min-width: 6.5em;
+  line-height: 6.5em;
+  text-align: center;
+  transition: 1s ease-in-out;
+  border: 0.25em dotted;
 }
 
-p {
-  padding: 10px 5px;
-  border: 3px solid black;
-  border-radius: 20px;
-  width: 150px;
-  font-size: 1.2rem;
-  text-align: center;
+#box1:hover {
+  rotate: 90deg;
 }
 
-.rotate {
-  transition: rotate 1s;
+#box2:hover {
+  rotate: y 180deg;
 }
 
-div:hover .rotate {
-  rotate: 1 -0.5 1 180deg;
+#box3:hover {
+  rotate: 1 2 1 360deg;
 }
 ```
 
 #### Result
 
-{{EmbedLiveSample("Rotate_an_element_on_hover")}}
+{{EmbedLiveSample("Rotating_an_element_on_hover", "100%", 150)}}
 
 ## Specifications
 
diff --git a/files/en-us/web/css/scale/index.md b/files/en-us/web/css/scale/index.md
index 3549199193e17d3..4d8c631c1f2f1da 100644
--- a/files/en-us/web/css/scale/index.md
+++ b/files/en-us/web/css/scale/index.md
@@ -15,6 +15,8 @@ browser-compat: css.properties.scale
 
 The **`scale`** [CSS](/en-US/docs/Web/CSS) property allows you to specify scale transforms individually and independently of the {{CSSxRef("transform")}} property. This maps better to typical user interface usage, and saves having to remember the exact order of transform functions to specify in the `transform` value.
 
+{{EmbedInteractiveExample("pages/css/scale.html")}}
+
 ## Syntax
 
 ```css
@@ -64,51 +66,42 @@ scale: unset;
 
 ### Scaling an element on hover
 
+The following example shows how to scale an element on hover.
+Two boxes are shown, one with a single `scale` value which scales the element along both axes.
+The second box has two `scale` values which scales the element along the X and Y axes independently.
+
 #### HTML
 
 ```html
-<div>
-  <p class="scale">Scaling</p>
-</div>
+<div class="box" id="box1">single value</div>
+<div class="box" id="box2">two values</div>
 ```
 
 #### CSS
 
 ```css
-* {
-  box-sizing: border-box;
-}
-
-html {
-  font-family: sans-serif;
-}
-
-div {
-  width: 150px;
-  margin: 0 auto;
-}
-
-p {
-  padding: 10px 5px;
-  border: 3px solid black;
-  border-radius: 20px;
-  width: 150px;
-  font-size: 1.2rem;
+.box {
+  float: left;
+  margin: 1em;
+  width: 7em;
+  line-height: 7em;
   text-align: center;
+  transition: 0.5s ease-in-out;
+  border: 3px dotted;
 }
 
-.scale {
-  transition: scale 1s;
+#box1:hover {
+  scale: 1.25;
 }
 
-div:hover .scale {
-  scale: 2 0.7;
+#box2:hover {
+  scale: 1.25 0.75;
 }
 ```
 
 #### Result
 
-{{EmbedLiveSample("Scaling_an_element_on_hover")}}
+{{EmbedLiveSample("Scaling_an_element_on_hover", "100%", 150)}}
 
 ## Specifications
 
diff --git a/files/en-us/web/css/translate/index.md b/files/en-us/web/css/translate/index.md
index 1bb1b9d5fa62d9d..9798fa706077d34 100644
--- a/files/en-us/web/css/translate/index.md
+++ b/files/en-us/web/css/translate/index.md
@@ -15,6 +15,8 @@ browser-compat: css.properties.translate
 
 The **`translate`** [CSS](/en-US/docs/Web/CSS) property allows you to specify translation transforms individually and independently of the {{CSSxRef("transform")}} property. This maps better to typical user interface usage, and saves having to remember the exact order of transform functions to specify in the `transform` value.
 
+{{EmbedInteractiveExample("pages/css/translate.html")}}
+
 ## Syntax
 
 ```css
@@ -61,51 +63,53 @@ translate: unset;
 
 ## Examples
 
-### HTML
+### Translating an element on hover
+
+This example shows how to use the `translate` property to move an element in three axes.
+The first box is moved along the X axis and the second box is moved along the X and Y axes.
+The third box is moved along the X, Y and Z axes and has the appearance of moving toward the viewer because of the addition of {{cssxref('perspective')}} to the parent element.
+
+#### HTML
 
 ```html
-<div>
-  <p class="translate">Translation</p>
+<div class="wrapper">
+  <div id="box1">translate X</div>
+  <div id="box2">translate X,Y</div>
+  <div id="box3">translate X,Y,Z</div>
 </div>
 ```
 
-### CSS
+#### CSS
 
 ```css
-* {
-  box-sizing: border-box;
-}
-
-html {
-  font-family: sans-serif;
+.wrapper {
+  perspective: 100px;
+  display: inline-flex;
+  gap: 1em;
 }
-
-div {
-  width: 150px;
-  margin: 0 auto;
-}
-
-p {
-  padding: 10px 5px;
-  border: 3px solid black;
-  border-radius: 20px;
-  width: 150px;
-  font-size: 1.2rem;
+.wrapper > div {
+  width: 7em;
+  line-height: 7em;
   text-align: center;
+  transition: 0.5s ease-in-out;
+  border: 3px dotted;
+}
+#box1:hover {
+  translate: 20px;
 }
 
-.translate {
-  transition: translate 1s;
+#box2:hover {
+  translate: 20px 20px;
 }
 
-div:hover .translate {
-  translate: 200px 50px;
+#box3:hover {
+  translate: 5px 5px 30px;
 }
 ```
 
-### Result
+#### Result
 
-{{EmbedLiveSample('Examples')}}
+{{EmbedLiveSample("Translating_an_element_on_hover", "100%", 175)}}
 
 ## Specifications