Анимация “конверт”

Как сделать подобное на jQuery/JavaScript/CSS
Есть ромб, разделенный условно на четыре части и при наведении на него мышкой эти четыре части раскрываются в квадрат, т.е весь ромб превращается в квадрат, т.е типо как открытие конверта, только с четырех сторон. Внутри которого скрытый текст

Ответ

Вот пример реализации на css
Сейчас конверт открывается при наведении, но с помощью JavaScript (и минимум изменений в css) можно навесить обработчик, который будет открывать конверт при клике.
body { margin: 70px; background: #f7f7f7; } .envelope { position: relative; background: #082cde; width: 80px; height: 80px; text-align: center; line-height: 80px; } .envelope:hover .part1, .envelope:hover .part3 { -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); } .envelope:hover .part2, .envelope:hover .part4 { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } .envelope:hover .part1 { border-bottom-color: #082cde; } .envelope:hover .part2 { border-left-color: #082cde; } .envelope:hover .part3 { border-top-color: #082cde; } .envelope:hover .part4 { border-right-color: #082cde; } .envelope:hover .envelope__cover { display: inline-block; } .envelope .envelope__cover { -webkit-transition: all 0.5s linear; transition: all 0.5s linear; color: white; vertical-align: middle; line-height: normal; display: none; } .envelope .envelope__part { width: 0; height: 0; border: 40px solid transparent; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; position: absolute; } .envelope .part1 { border-bottom-color: #1d40ef; -webkit-transform-origin: bottom; -ms-transform-origin: bottom; transform-origin: bottom; } .envelope .part2 { border-left-color: #1d40ef; -webkit-transform-origin: left; -ms-transform-origin: left; transform-origin: left; } .envelope .part3 { border-top-color: #1d40ef; -webkit-transform-origin: top; -ms-transform-origin: top; transform-origin: top; } .envelope .part4 { border-right-color: #1d40ef; -webkit-transform-origin: right; -ms-transform-origin: right; transform-origin: right; }

Inner content

Из интересного: каждая из четырех частей (которые открываются) являются простыми div, у который высота и ширина равны 0, но задан border c соответствующим цветом границы (например, для нижней грани - border-bottom-color), который позволяет отображать блок в виде треугольника.

Для поворота на 180 градусов использовал transform: rotateX() и `transform: rotateY(), а чтобы поворот был относительно нужной грани (например, для нижнего треугольника, относительно его нижней стороны) - transform-origin

Исходники SCSS
$outerColor: #1d40ef; $innerColor: #082cde; $envelopeSizePx: 80;
body { margin: 70px; }
.envelope { position: relative; background: $innerColor; width: $envelopeSizePx+px; height: $envelopeSizePx+px; text-align: center; line-height: $envelopeSizePx+px;
&:hover { .part1, .part3 { transform: rotateX(-180deg); } .part2, .part4 { transform: rotateY(-180deg); } .part1 { border-bottom-color: $innerColor; } .part2 { border-left-color: $innerColor; } .part3 { border-top-color: $innerColor; } .part4 { border-right-color: $innerColor; } .envelope__cover { display: inline-block; } } .envelope__cover { color: white; vertical-align: middle; line-height: normal; display: none; } .envelope__part { width: 0; height: 0; border: $envelopeSizePx/2+px solid transparent; transition: all 0.5s ease; position: absolute; } .part1 { border-bottom-color: $outerColor; transform-origin: bottom; } .part2 { border-left-color: $outerColor; transform-origin: left; } .part3 { border-top-color: $outerColor; transform-origin: top; } .part4 { border-right-color: $outerColor; transform-origin: right; } }