WoodNeck / css-camera

New way to see a web page with CSS3 3D transform

📷 CSS-CAMERA

🎥 Demo · 📄 Document

Add depth to your web page with CSS3 3D transform.

This project is mostly inspired by Keith Clark's work.

✨ Features

• Movable, and Rotatable camera for your scene.
• Can move to in front of any element in your scene, whether it has been rotated or translated.

⚙️ Installation

npm i css-camera
# or
yarn add css-camera

🏃 Quick Start

// Prerequisite:
// Create your scene as you like
const card = document.querySelector("#card");
const cardButton = document.querySelector("#card-button");

// First, make camera
const camera = new CSSCamera("#space");

// Call its method, then update it!
cardButton.onclick = () => {
  camera.focus(card);
  camera.update(2000);
}

Check more methods on the 📄API Documentation page

📜 License

MIT