JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Css Camera

    New way to see a web page with CSS3 3D transform
    Filed under  โ€บ 

    • 🔾22%Overall
    • 163
    • 4.3 days
    • 🕩8
    • 👥1

    ๐Ÿ“ท 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

    Show All