:container{
transform: skewX(-12deg);
transform-style: preserve-3d;
perspective: 700px;
}
:doodle {
grid-gap: 5px;
width: 75vh;
height: 75vh;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
background: #1d1e22;
border-radius:100%;
--scaledelay: calc((
(@abs(@abs(@row - @size-row/2) + @abs(@col - @size-col/2) - @size-col) / @size-col) - 1) * -1.5s) ;
animation-name: scale;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: var(--scaledelay);
perspective: 100px;
transform-style: preserve-3d;
transform: skewX(12deg) translateZ(0px);
box-shadow: 20px 20px 8px -1px rgba(29, 30, 34, 0.5);
@keyframes scale {
0%{
transform: skewX(12deg) translate3d(0, 0, 0);
box-shadow: 20px 20px 8px -1px rgba(29, 30, 34, 0.5);
}
50%{
transform: skewX(12deg) translate3d(20px, 20px, 20px);
box-shadow: 2px 2px 1px 0px rgba(29, 30, 34, 0.8);
}
100%{
transform: skewX(12deg) translate3d(0, 0, 0);
box-shadow: 20px 20px 8px -1px rgba(29, 30, 34, 0.5);
}
}