Как установить зеркальное отражение на весь div?

Question

[Макс Darkleviathan]

Имеется div, в его стилях прописана картинка jpg.
Нужно применить к этому блоку отражение.
Если отдельно фотку - пробовал вот такую конструкцию

-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(rgba(255,255,255,0.2)));

Все работает, но результат не тот.
Нужно именно применить отзеркаливание ко всему div'у
reflection.js тоже пробовал, но реакции 0.

Comments

[kulaeff]

Вам нужно чтобы у блока было зеркальное отражение (например, внизу) или нужно сам блок зеркально отразить?

[Макс Darkleviathan]

kulaeff, нужно чтоб у блока было зеркальное отражение внизу

[kulaeff]

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

[Макс Darkleviathan]

kulaeff, Это как раз и понятно, но я только новичок в изучении js, поэтому полноценно рабочий вариант пока не получается соорудить.

[Златослав Десятников]

Макс Darkleviathan, так учите JS. Как будет понимание и какие-то попытки что-то сделать, приходите.

Answer 1

[kulaeff]

Вот вам простая заготовка https://jsfiddle.net/h5da4uqc/1/. По желанию можно добавить блюр и прочие штучки.

Answer 2

[Александр]

Кроссбраузерное отражение элементов на CSS3
https://habrahabr.ru/post/140380/

вычленил самое главное:

html

<div>
  <img src="http://lorempixel.com/150/150" alt="">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, totam.</p>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</div>
<div class="refl">
  <img src="http://lorempixel.com/150/150" alt="">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, totam.</p>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</div>

css

.refl{transform: scaley(-1);}
или .refl{transform: rotatex(180deg);}

песочница

Comments

[Павел Корнилов]

Для ТС - jsfiddle.net/5chjE/33
Ссыль из статьи.

[Макс Darkleviathan]

Если вы не заметили, в примере, что вы выслали у блока div 2 элемента, один из которых отображен по вертикали.
А мне нужно применить отражение ко всему блоку div