Skip to content
New way to see a web page with CSS3 3D transform
TypeScript HTML CSS JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo 💡 Update jsdoc Sep 9, 2019
src 🚑 First update is not called automatically Sep 20, 2019
test/manual 💡 Update jsdoc Sep 9, 2019
.editorconfig Add Vector structure Apr 18, 2019
.gitignore 📸 Snapshot v1.0.1 Sep 20, 2019
LICENSE
README.md 📝 Fix document link href Aug 26, 2019
jsdoc.json 💡 Enable jsdoc Aug 2, 2019
package-lock.json 💄 Filling homepage contents Aug 9, 2019
package.json 📸 Snapshot v1.0.1 Sep 20, 2019
rollup.config.js 💡 Enable jsdoc Aug 2, 2019
tsconfig.json Renaming methods & making update async Aug 1, 2019
tslint.json 🐛 Fixing lookAt to work with rotateY Jul 26, 2019

README.md

📷 CSS-CAMERA

npm GitHub

🎥 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

You can’t perform that action at this time.