JSFiddle - React, Tailwind, and code Playground

by kahen

HTML

<div>
    A <img src="http://img225.imageshack.us/img225/7005/bce3bf4c851b4adc8c4e1ff.png" />
    B
    <img src="http://img225.imageshack.us/img225/7005/bce3bf4c851b4adc8c4e1ff.png" />
    C
</div>
<div class="transformA">
    A <img src="http://img225.imageshack.us/img225/7005/bce3bf4c851b4adc8c4e1ff.png" />
    B
    <img src="http://img225.imageshack.us/img225/7005/bce3bf4c851b4adc8c4e1ff.png" />
    C
</div>
<div class="transformB">
    A <img src="http://img225.imageshack.us/img225/7005/bce3bf4c851b4adc8c4e1ff.png" />
    B
    <img src="http://img225.imageshack.us/img225/7005/bce3bf4c851b4adc8c4e1ff.png" />
    C
</div>

CSS

/* Note the annoying problem with the bounding box! */
div img {
    border: 6px solid black;
    width:100px;
}
div.transformA > img {
    height:auto;
    transform:matrix(0.5,0,0,0.5,0,0);
}
div.transformB > img {
    transform:scale(0.5);
    transform-origin:0% 50%;
}