Есть ли способ переворачивать коробку? ⇐ CSS

[Anonymous]

В настоящее время я работаю над какой-то вещью Pixelart, которая делает 3 «изображения», 1 в Div's, 1 в Box-Shadow и 1 в Svg. < /p>
По одной из причин, я не могу перевернуть тень коробки с этим: < /p>

Код: Выделить всё

element {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
< /code>
 Пример: < /strong> < /p>


body {
background-color: rgba(255, 0, 180, 0.4);
}
.girl,
.girl > div {
display: inline-block;
font-size: 0;
}
.girlS:before {
content: "";
width: 9px;
height: 9px;
position: absolute;
box-shadow: 27px 0px #000000, 36px 0px #000000, 45px 0px #000000, 54px 0px #000000, 63px 0px #000000, 9px 9px #000000, 18px 9px #000000, 27px 9px #000000, 36px 9px #000000, 45px 9px #000000, 54px 9px #000000, 63px 9px #000000, 72px 9px #000000, 9px 18px #000000, 18px 18px #000000, 27px 18px #000000, 36px 18px #000000, 45px 18px #ffe0bd, 54px 18px #ffe0bd, 63px 18px #000000, 72px 18px #000000, 81px 18px #000000, 0px 27px #000000, 9px 27px #000000, 18px 27px #000000, 27px 27px #000000, 36px 27px #ffe0bd, 45px 27px #ffe0bd, 54px 27px #ffe0bd, 63px 27px #ffe0bd, 72px 27px #000000, 81px 27px #000000, 0px 36px #000000, 9px 36px #000000, 18px 36px #000000, 27px 36px #ffe0bd, 36px 36px #ffe0bd, 45px 36px #675636, 54px 36px #ffe0bd, 63px 36px #675636, 72px 36px #ffe0bd, 81px 36px #000000, 0px 45px #000000, 9px 45px #000000, 18px 45px #000000, 27px 45px #ffe0bd, 36px 45px #ffe0bd, 45px 45px #ffe0bd, 54px 45px #ffe0bd, 63px 45px #ffe0bd, 72px 45px #ffe0bd, 81px 45px #000000, 0px 54px #000000, 9px 54px #000000, 18px 54px #000000, 27px 54px #000000, 36px 54px #ffe0bd, 45px 54px #ffe0bd, 54px 54px #ff0000, 63px 54px #ffe0bd, 72px 54px #000000, 81px 54px #000000, 18px 63px #000000, 27px 63px #000000, 36px 63px #000000, 45px 63px #ffe0bd, 54px 63px #ffe0bd, 63px 63px #000000, 72px 63px #000000, 27px 72px #000000, 36px 72px #ffffff, 45px 72px #ffe0bd, 54px 72px #ffe0bd, 63px 72px #ffffff, 72px 72px #000000, 27px 81px #ffffff, 36px 81px #ffffff, 45px 81px #ffffff, 54px 81px #ffffff, 63px 81px #ffffff, 72px 81px #ffffff, 27px 90px #ffffff, 36px 90px #ffffff, 45px 90px #ffffff, 54px 90px #ffffff, 63px 90px #ffffff, 72px 90px #ffffff, 27px 99px #ffe0bd, 36px 99px #ffffff, 45px 99px #ffffff, 54px 99px #ffffff, 63px 99px #ffffff, 72px 99px #ffe0bd, 27px 108px #ffe0bd, 36px 108px #ffffff, 45px 108px #ffffff, 54px 108px #ffffff, 63px 108px #ffffff, 72px 108px #ffe0bd, 27px 117px #ffe0bd, 36px 117px #ffffff, 45px 117px #ffffff, 54px 117px #ffffff, 63px 117px #ffffff, 72px 117px #ffe0bd, 27px 126px #ffe0bd, 36px 126px #ffffff, 45px 126px #ffffff, 54px 126px #ffffff, 63px 126px #ffffff, 72px 126px #ffe0bd, 36px 135px #ffffff, 45px 135px #ffffff, 54px 135px #ffffff, 63px 135px #ffffff, 45px 144px #ffe0bd, 54px 144px #ffe0bd, 45px 153px #ffe0bd, 54px 153px #ffe0bd, 45px 162px #ffe0bd, 54px 162px #ffe0bd, 45px 171px #000000, 54px 171px #000000;
}
svg {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}< /code>
Div 14:




box-shadow 9:

SVG 5:

Если я могу помочь, я сделал это с этим уродливым инструментом (не кросс -браузер, только тестируется и используется на Chrome 47.0.xxxxx, так что есть простое решение (CSS, JQuery, Javascript)?>

Подробнее здесь: https://stackoverflow.com/questions/345 ... box-shadow