Add depth to your web page with CSS3 3D transform.
This project is mostly inspired by Keith Clark's work.
- 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.
npm i css-camera
# or
yarn add css-camera
// 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