Christmas foldable decoration
<div class="decoration">
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
<div class="panel"></div>
</div> * {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100dvh;
background-color: aquamarine;
display: grid;
place-items: center;
}
.decoration {
width: 98%;
min-width: 600px;
max-width: 800px;
perspective: 1200px;
}
.panel {
width: 24%;
aspect-ratio: 3 / 4;
position: relative;
display: inline-block;
transform-style: preserve-3d;
background-repeat: no-repeat;
}
.panel:nth-child(1) {
background: url(img/cover.jpg);
background-size: cover;
transform-origin: 100% center;
mask-image: url(img/hat-mask.png);
mask-mode: alpha;
mask-size: cover;
mask-repeat: no-repeat;
mask-position: 50% 50%;
translate: 2% 0;
z-index: 1;
animation: fold 3s alternate infinite;
animation-timing-function: ease-in-out;
}
.panel:nth-child(2) {
background-image: url("img/hat-reversed.png"), linear-gradient(white, white);
background-size: 175%, auto;
background-position: 50%;
transform-origin: 0% center;
rotate: y -40deg;
}
.panel:nth-child(3) {
background-image: url("img/hat.png"), linear-gradient(red, red);
background-size: 175%, auto;
background-position: 50%;
transform-origin: 100% center;
rotate: y 30deg;
translate: -39% 0px 22px;
}
.panel:nth-child(4) {
background-image: url("img/snowy-scene.jpg");
background-size: cover;
transform-origin: 0% center;
rotate: y -17deg;
translate: -44% 0 21px;
}
@keyframes fold {
80%,
100% {
transform: rotateY(140deg);
}
} Description
This an idea for a customisible decoration. It is like an accordian of cards. There are different designs on each side, you can fold them in different directions to create different combinations. It could be hung from the ceiling or placed on a table or mantelpiece.
Practice with masks and 3D perspective.