CSS3 Perspective Playground
perspective: {{ perspective }}px;
rotateX: {{ rotationX }}deg;
rotateY: {{ rotationY }}deg;
rotateZ: {{ rotationZ }}deg;
Reset
Copy
{{ this.transformStyle }}
{{ copiedActive ? "Copied!" : "Reset"}}
:doodle { @grid: 1x3 / 100vmax; position: absolute; top: 0; left: 0; z-index: 0; } @size: 100% 150%; position: absolute; background: @m(100, ( linear-gradient(transparent, @p( #FF5A18@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%) } }