Вот пример реализации на 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;
}
<div class="envelope">
<div class="envelope__part part1"></div>
<div class="envelope__part part2"></div>
<div class="envelope__part part3"></div>
<div class="envelope__part part4"></div>
<div class="envelope__cover">Inner content</div>
</div>
Из интересного: каждая из четырех частей (которые открываются) являются простыми 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;
}
}