<h1>Transform function order matters</h1>
<div class="showcase">

  <div class="demo">
    <div class="box">🐒</div>
  </div>
  <pre class="language-css"><code>.transformed {
  transform: rotate(45deg) 
   translate(200%);
}</code></pre>

  <div class="demo">
    <div class="box">🐒</div>
  </div>
  <pre class="language-css"><code>.transformed-reverse {
  transform: translate(200%) 
   rotate(45deg);
}</code></pre>
</div>

<div class="legend">
  <h2>Legend</h2>
  <div>
    <div class="original">🐒</div><span>Original Monkey</span>
  </div>
  <div>
    <div class="transformed">🐒</div><span>Transformed Monkey</span>
  </div>

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap");

:root {
  --box-size: 2rem;
  --transformed-color: yellow;
}

body {
  font-family: Montserrat, sans-serif;
  font-weight: 300;
}

.box {
  display: inline-block;
  position: relative;
  width: var(--box-size);
  aspect-ratio: 1 / 1;
  border: 1px grey dashed;
  font-size: 1.5rem;
}

.box::after {
  content: "🐒";
  position: absolute;
  width: inherit;
  aspect-ratio: inherit;
  background-color: var(--transformed-color);
  filter: grayscale(0%);
  border: 1px grey solid;
}

.demo{
  width:8rem;
  aspect-ratio: 1;
  background-color: pink;
}

.demo .box::after {
  transform: rotate(45deg) translate(200%);
}

.demo:nth-of-type(2) .box::after {
  transform: translate(200%) rotate(45deg);
}

pre[class*="language-"] {
  padding: 0.75rem;
  margin: 0;
  border-radius: 8px;
  max-width:240px;

  code {
    margin: 0;
  }
}

.showcase {
  display: grid;
  place-items: center;
  grid-template-columns: 120px max-content;
  margin: 1rem;
  gap: 2rem;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  margin-block-end: 1rem;
}

h1 {
  text-align: center;
}


.original {
  display:inline-block;
  margin-inline-end: 0.5rem;
  width: var(--box-size);
  aspect-ratio: 1 / 1;
  border: 1px grey dashed;
  font-size:1.5rem;
}

.transformed {
  display:inline-block;
  margin-inline-end: 0.5rem;
  width: var(--box-size);
  aspect-ratio: 1 / 1;
  background-color: var(--transformed-color);
  font-size:1.5rem;
  border:1px grey solid;
}

.legend{
  display:grid;
  grid-template-columns: 1fr 1fr;
  
  max-width:600px;
  margin: 0 auto;
  
  h2{
    margin-block-end: .5rem;
    grid-column: 1 / -1;
    font-size: 1rem;
  }
}

@media screen and (max-width: 500px){
  .showcase {
    grid-template-columns: 1fr;
    grid-template-rows: 200px
  }
}