CSS: background mirror reflection


I have a div 700px x 300px and a background picture 700px x 300px. The div height can be increased to 600px. Div sizes are changed with jQuery.

I have a next CSS style for div:

#myDiv {
background:transparent url(../images/background.jpg) bottom no-repeat;
border:1px solid #000;
-webkit-box-shadow:0 0 10px 2px #000;
-moz-box-shadow:0 0 10px #000;
-ms-box-shadow:0 0 10px #000;
-o-box-shadow:0 0 10px #000;
box-shadow:0 0 10px 2px #000;

If div height is increased, the background should be mirrorly reflected by vertical. I've added the next CSS style in my CSS file:

#myDiv:before {
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-ms-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);}

But it does not work (I try different browsers). May I miss something?

Best Solution

I think you miss few important styles in the :before element. You have to specify content, dimensions and since :before has display default inline, you have to make it block.

#myDiv:before {
    content: "";
    display: block;
    height: 300px;
    width: 700px;

    background: url(http://lorempixel.com/700/300/);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);

The whole demo: http://codepen.io/canescz/pen/zHCjA

Note that the :before element pushes whole content down so you might want to make the :before as position:absolute. But I think if you play with it, you will figure out what you need.

By the way only -webkit prefix should be enough since other browsers don't use prefixes anymore for transform. Check http://caniuse.com/#search=translate to match your desired browser support.