<table>
<thead>
<tr>
<th>Type</th>
<th>Original</th>
<th>Transformed</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rotated</td>
<td><span class="icon next">👉</span></td>
<td><span class="icon rotated">👉</span></td>
</tr>
<tr>
<td>Scaled</td>
<td><span class="icon next">👉</span></td>
<td><span class="icon scaled">👉</span></td>
</tr>
</tbody>
</table>
.icon {
display: inline-block; /* allow transforms */
font-size: 2rem;
line-height: 1rem;
}
.rotated {
transform: rotate(180deg);
}
.scaled {
transform: scaleX(-1);
}
/* layout */
body {
font: 16px system-ui;
}
table {
display: grid;
grid-gap: 3rem;
grid-template-columns: repeat(3, auto);
margin: 3rem auto;
max-width: 40rem;
}
thead, tbody, tr {
display: contents;
}
th {
text-align: left;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.