React Architecture Concept • Core Motion Model
Transform: 2D & 3D Matrix Hardware Acceleration in React
The CSS transform property is the bedrock of high-performance web motion because changes to translate, rotate, and scale bypass the browser layout and paint pipelines, rendering exclusively on the compositing layer. However, chaining complex 2D and 3D transforms manually in React frequently results in transform-origin mismatches, perspective distortion, and gimbal lock. ExodeUI lets you set position, rotation and scale visually on each layer, so you do not manage transform strings by hand.
In ExodeUI, translation, rotation and scale are separate animatable properties of each layer, so they can be combined and interrupted independently.
Runnable ExodeUI React Implementation
Production ReadyMount the ExodeUICanvas component and bind parameters declaratively without imperative lifecycle hooks:
import React, { useState } from 'react';
import { ExodeUICanvas } from 'exodeui';
export function PerspectiveTransformCard() {
const [rotation, setRotation] = useState({ x: 0, y: 0 });
return (
<div
className="card-perspective-frame"
onMouseMove={(e) => {
const rect = e.currentTarget.getBoundingClientRect();
const x = (e.clientX - rect.left) / rect.width - 0.5;
const y = (e.clientY - rect.top) / rect.height - 0.5;
setRotation({ x: -y * 25, y: x * 25 });
}}
>
<ExodeUICanvas
src="/scenes/3d-card.json"
inputs={{
"rotateX": rotation.x,
"rotateY": rotation.y,
"perspective": 1000
}}
/>
</div>
);
}Frequently Asked Questions about transform
Why are transforms faster than animating top, left, width, or height?
Transforms run entirely on the GPU compositor thread without triggering browser layout or paint recalculations, which is why they usually animate more smoothly.
Can ExodeUI handle 3D perspective without external Three.js dependencies?
Yes. The exodeui package includes a 3D canvas component (Exode3DCanvas) alongside the 2D one. Check the docs for what each runtime supports.
How do transform origins work in ExodeUI scenes?
Transform origins can be set visually per layer to center, corners, or arbitrary vector coordinates without manual pixel offset math.