Square Transform Project

This project is a React application that allows users to manipulate a square shape on the screen using various transform properties.

Features

• Translate the square along X and Y axes
• Rotate the square
• Scale the square
• Adjust the opacity of the square

Components

Page Component

The main component that renders the entire application. It manages the state for all transform properties and renders the control inputs and the square.

Square Component

Renders a blue square that can be transformed based on the provided properties.

Input Components

• InputX: Controls the X-axis translation
• InputY: Controls the Y-axis translation
• Rotate: Controls the rotation
• Scale: Controls the scaling
• Opacity: Controls the opacity

Usage

To use this application:

1. Clone the repository
2. Install dependencies with npm install
3. Run the development server with npm run dev
4. Open the application in your browser

Use the input controls at the top of the page to manipulate the square's properties.