Sylynder Framework
A Journey To Sweet PHP Development
:doodle { @grid: 200x1/ 35vmin; perspective: 50vmin; transform-style: preserve-3d; animation: rd 50s linear infinite; will-change: transform; } margin: auto; @size: 5px .1vmin; @random { height: .2vmin; } will-change: transform; transform-style: preserve-3d; background: @p(#00b8a9, #f8f3d4, #f6416c, #ffde7d); animation: cycle @r(1s, 5s, .1) linear infinite; animation-delay: -@r(.1s, 5s); --tz: 18vmin; --sc: @r(1, 5, .1); transform: rotateY(0) scaleX(var(--sc)) translateZ(var(--tz)); @keyframes cycle { to { transform: rotateY(@p(1turn, -1turn)) scaleX(var(--sc)) translateZ(var(--tz)); } } /* will stop rotating @keyframes rd { to { transform: rotateZ(@p(-2turn, 2turn)) } }*/