Skip to content

WoodNeck/css-camera

Folders and files

NameName
Last commit message
Last commit date

Latest commit

94c82ef Β· Sep 20, 2019

History

52 Commits
Sep 9, 2019
Sep 20, 2019
Sep 9, 2019
Apr 18, 2019
Sep 20, 2019
Apr 12, 2019
Aug 26, 2019
Aug 2, 2019
Aug 9, 2019
Sep 20, 2019
Aug 2, 2019
Aug 1, 2019
Jul 26, 2019

Repository files navigation

πŸ“· CSS-CAMERA

npm GitHub

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