That's awesome Mary, I was inspired and whipped this up to showcase transforms. It looks a bit "hacky" but it's real CSS:
#content,
#content-wrapper {
width: 400px;
min-height: 200px;
display: block;
margin: 0 auto;
overflow: hidden;
position: relative;
}
#content::before { /* Top Left: no transform */
content: "";
z-index: -1;
position: absolute;
width: 80px;
height: 80px;
background: url(bg.png) 0 0 no-repeat;
top: 0;
left: 0;
}
#content::after { /* Top Right: flip horizontally */
content: "";
z-index: -1;
position: absolute;
width: 80px;
height: 80px;
background: url(bg.png) 0 0 no-repeat;
-moz-transform: scaleX(-1);
transform: scaleX(-1);
top: 0;
right: 0;
}
#content-wrapper::before { /* Bottom Left: flip vertical */
content: "";
z-index: -1;
position: absolute;
width: 80px;
height: 80px;
background: url(bg.png) 0 0 no-repeat;
-moz-transform: scaleY(-1);
transform: scaleY(-1);
bottom: 0;
left: 0;
}
#content-wrapper::after { /* Bottom Right: flip horizontal + vertical */
content: "";
z-index: -1;
position: absolute;
width: 80px;
height: 80px;
background: url(bg.png) 0 0 no-repeat;
-moz-transform: scaleX(-1) scaleY(-1);
transform: scaleX(-1) scaleY(-1);
bottom: 0;
right: 0;
}
Does the same thing you did, but with only 1 image!
