aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
53 lines • 1.68 kB
TypeScript
/**
* 3D Transform Hook
* Provides advanced 3D CSS transform capabilities with perspective and rotation
*/
import { CSSProperties } from 'react';
/**
* 3D Transform state
*/
export interface Transform3DState {
rotateX: number;
rotateY: number;
rotateZ: number;
translateX: number;
translateY: number;
translateZ: number;
scale: number;
scaleX: number;
scaleY: number;
scaleZ: number;
perspective: number;
}
/**
* 3D Transform options
*/
export interface Use3DTransformOptions {
initialTransform?: Partial<Transform3DState>;
perspective?: number;
transformOrigin?: string;
backfaceVisibility?: 'visible' | 'hidden';
transformStyle?: 'flat' | 'preserve-3d';
}
/**
* Hook for 3D transforms
*/
export declare const use3DTransform: (options?: Use3DTransformOptions) => {
transform: Transform3DState;
style: CSSProperties;
setRotation: (x: number, y: number, z?: number) => void;
setTranslation: (x: number, y: number, z?: number) => void;
setScale: (scale: number | {
x: number;
y: number;
z?: number;
}) => void;
updateTransform: (updates: Partial<Transform3DState>) => void;
rotateFromPointer: (x: number, y: number, containerWidth: number, containerHeight: number, maxRotation?: number) => void;
animateRotation: (targetX: number, targetY: number, targetZ?: number, duration?: number) => void;
reset: (animated?: boolean) => void;
flip: (duration?: number) => void;
wobble: (intensity?: number, duration?: number) => void;
getTransformString: (state?: Transform3DState) => string;
};
//# sourceMappingURL=use3DTransform.d.ts.map