Generate 3D perspective UI components with rotation

3D UI is a design-style child skill ('breaking the plane') for interfaces that exist in a three-dimensional, rotatable space, part of the design-it skill family and not meant to be triggered directly. Three core principles: True Depth (elements physically move closer to or further from the camera via Z-axis translation, not just shadows), Perspective (CSS perspective or WebGL to create realistic vanishing points), and Interactive Rotation (elements respond to mouse movement or device gyroscope by tilting or rotating in 3D space).

Use it when the user's request matches this 3D, depth-driven aesthetic - card interfaces, product showcases, or interactive panels that should feel physically manipulable in space rather than flat. As a design sub-style, it's selected by the parent design-it skill's routing, not invoked on its own.

Visual DNA: bold, striking palettes like Midnight Luxury or Industrial Chic, since 3D elements need high contrast to reveal their geometry; bold, blocky, or extruded typography; and rendered 3D assets (.glb, .gltf, or high-res PNGs of 3D objects) instead of flat icons. Web implementation relies on perspective, transform-style: preserve-3d, and rotateX/rotateY - a card starts at a slight rotateX(15deg) rotateY(-15deg) tilt, straightens and pushes toward the viewer on hover (translateZ(50px)), with inner content pushed forward independently via its own translateZ. SwiftUI implements the same effect with .rotation3DEffect() on two axes linked to a drag gesture, using the perspective parameter (default 1/6, higher values distort more) to control camera distance, and can link rotation to CoreMotion gyroscope input for a fully interactive 3D card. Flutter achieves the equivalent via a GestureDetector tracking pan offset with a spring-back animation on release - the perspective trick specifically is Matrix4.identity()..setEntry(3, 2, 0.001) applied inside a Transform widget, with TweenAnimationBuilder smoothing the return-to-center physics. React Native uses PanResponder and an Animated.ValueXY to track drag position, springing back to {x: 0, y: 0} on release with Animated.spring.

All three platform implementations share the same interaction model - drag or gyroscope input maps directly to rotation angle on two axes, with a spring-based snap-back to neutral when the gesture ends - so the 3D feel stays consistent whether the surface is CSS, SwiftUI, or Flutter.

Designers and frontend developers building an interface that should feel spatial and physically manipulable - product cards, showcases, interactive panels - rather than a flat 2D layout with only shadow-based depth cues.