https://github.com/WoodNeck/css-camera

New way to see a web page with CSS3 3D transform
https://github.com/WoodNeck/css-camera

3d camera css-camera css3 graphics

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/WoodNeck/css-camera
• Owner: WoodNeck
• License: mit
• Created: 2019-04-04T04:21:12.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2021-12-20T06:11:57.000Z (almost 3 years ago)
• Last Synced: 2024-07-18T06:28:38.139Z (4 months ago)
• Topics: 3d, camera, css-camera, css3, graphics
• Language: TypeScript
• Homepage: https://woodneck.github.io/css-camera/
• Size: 10.2 MB
• Stars: 209
• Watchers: 4
• Forks: 8
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-github-star - css-camera

README

        
# 📷 CSS-CAMERA

![npm](https://img.shields.io/npm/v/css-camera?style=for-the-badge)

![GitHub](https://img.shields.io/github/license/woodneck/css-camera?style=for-the-badge)



  


🎥 Demo · 📄 Document


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

> This project is mostly inspired by [Keith Clark's work](https://keithclark.co.uk/labs/css-fps/).

## ✨ 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

```sh

npm i css-camera

# or

yarn add css-camera

```

## 🏃 Quick Start

```js

// 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](https://github.com/WoodNeck/css-camera/blob/master/LICENSE)