CSS-CAMERA

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

Documents Github

Install

$ npm i css-camera
Placeholder image

WoodNeck

@woodneck

You can put any HTML element you like, then just transform it. @css-camera will do the rest for you.

It's super simple!

// 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 = () => {
  // Move camera in front of "card"
  camera.focus(card);
  camera.update(2000);
}

See the source of this page.

More demos?

🎥 Main Card Code More