CSS3 Perspective Playground

perspective: {{perspective}}px; rotateX: {{rotateX}}deg; rotateY: {{rotateY}}deg; rotateZ: {{rotateZ}}deg;

:doodle { @grid: 1x3 / 100vmax; position: absolute; top: 0; left: 0; z-index: -1; max-height: 100%; max-width: 100%;overflow: hidden; } @size: 100% 150%; position: absolute; background: @m(100, ( linear-gradient(transparent, @p( #FFFDE1@repeat(2, @p([0-9a-f])), #FB3569@repeat(2, @p([0-9a-f])) )) @r(0%, 100%) @r(0%, 100%) / @r(1px) @r(23vmin) no-repeat )); will-change: transform; animation: f 50s linear calc(-50s / @size() * @i()) infinite; @keyframes f { from { transform: translateY(-100%) } to { transform: translateY(100%) } }