CSS: отражение заднего плана фона

Question

У меня есть div 700px x 300px и фоновое изображение 700px x 300px. Высота div может быть увеличена до 600 пикселей. Размеры формата изменены с помощью jQuery.

У меня есть следующий стиль CSS для DIV:

#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;} 

Если ДИВ высота увеличивается, фон должен быть mirrorly отражение по вертикали. Я добавил следующий 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);} 

Но это не сработает (я пробую разные браузеры). Могу я что-то пропустить?

Answer 1

Я думаю, вы пропустили несколько важных стилей в: перед элементом. Вы должны указать контент, размеры и так как: перед тем, как отображать значение по умолчанию, вы должны заблокировать его.

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

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

Все демо: http://codepen.io/canescz/pen/zHCjA

Обратите внимание, что: перед тем элементом толкает все содержимое вниз, так что вы можете сделать: до того, как позиции: абсолютная. Но я думаю, что если вы поиграете с ним, вы поймете, что вам нужно.

Кстати, префикс -webkit должен быть достаточным, поскольку другие браузеры больше не используют префиксы для преобразования. Проверьте http://caniuse.com/#search=translate в соответствии с нужной поддержкой браузера.