CSS：背景镜像反射

Question

我有一个div 700px x 300px和一个背景图片700px x 300px。 div高度可以增加到600px。使用jQuery更改Div大小。

我有一个div的下一个CSS样式：

#myDiv {
position:relative;
overflow:visible;
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;
margin:10px;}

如果div高度增加，背景应该由垂直镜像反射。我在CSS文件中添加了下一个CSS样式：

#myDiv:before {
background:url(../images/background.jpg);
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-ms-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);}

但它不起作用（我尝试不同的浏览器）。我可以错过什么吗？