Multiple translate() transformations

by Lucas Krause

HTML

<div class="a b"></div>
<div class="a c"></div>
<div class="d"></div>

CSS

body {
    position:relative;
}

.a {
    width:20px;
    height:20px;
}
.b {
    background-color:royalblue;
}
.c {
    background-color:tomato;
}
.d {
    background-color:#999;
    position:absolute;
    top:0;
    left:20px;
    transform:translateY(13px) translateY(7px);
    width:100px;
    height:100px;
}