3D CSS guide: perspective, preserve-3d and translateZ

Title “3D CSS, from Super Mario Bros 3 to Mario 64” with axis, angle, translateZ, and scale sliders beside an isometric 3D scene of green and brown blocks, coins, and a star cube.

Carmen Ansio walks through building real 3D scenes in CSS, framing it as the leap from Super Mario Bros 3’s painted depth to Super Mario 64’s true camera. The tour covers perspective and perspective-origin to place a camera, preserve-3d to keep real depth, reusable cuboids, animated camera moves, and translateZ, rotateX/Y/Z, scale3d, and matrix3d. All six properties are Baseline.

carmenansio.com/articles/3d-css-guide