WoodNeck / Css Camera
Licence: mit
New way to see a web page with CSS3 3D transform
Stars: ✭ 195
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Css Camera
Jeelizfacefilter
Javascript/WebGL lightweight face tracking library designed for augmented reality webcam filters. Features : multiple faces detection, rotation, mouth opening. Various integration examples are provided (Three.js, Babylon.js, FaceSwap, Canvas2D, CSS3D...).
Stars: ✭ 2,042 (+947.18%)
Mutual labels: 3d, camera
Euc
A software rendering crate that lets you write shaders with Rust
Stars: ✭ 180 (-7.69%)
Mutual labels: graphics, 3d
Cellularforms
An implementation of Andy Lomas' Cellular Forms.
Stars: ✭ 124 (-36.41%)
Mutual labels: graphics, 3d
Renderer
A shader-based software renderer written from scratch in C89
Stars: ✭ 1,366 (+600.51%)
Mutual labels: graphics, 3d
Unity Dithered Transparency Shader
Unity material and shader for applying clipped, dithered transparency
Stars: ✭ 174 (-10.77%)
Mutual labels: graphics, 3d
Tinykaboom
A brief computer graphics / rendering course
Stars: ✭ 2,077 (+965.13%)
Mutual labels: graphics, 3d
Css Transform
CSS Transform Playground. Online tool to visualize 2D & 3D CSS3 Transform functions.
Stars: ✭ 113 (-42.05%)
Mutual labels: 3d, css3
Satin
A 3D Graphics Framework built on Apple's Metal
Stars: ✭ 182 (-6.67%)
Mutual labels: graphics, 3d
Deko3d
Homebrew low level graphics API for Nintendo Switch (Nvidia Tegra X1)
Stars: ✭ 103 (-47.18%)
Mutual labels: graphics, 3d
Tinyrenderer
A brief computer graphics / rendering course
Stars: ✭ 11,776 (+5938.97%)
Mutual labels: graphics, 3d
Tinyraycaster
486 lines of C++: old-school FPS in a weekend
Stars: ✭ 1,383 (+609.23%)
Mutual labels: graphics, 3d
Wechart
Create all the [ch]arts by cax or three.js - Cax 和 three.js 创造一切图[表]
Stars: ✭ 152 (-22.05%)
Mutual labels: graphics, 3d
Gaiasky
Mirror of Gaia Sky repository hosted on Gitlab: https://gitlab.com/langurmonkey/gaiasky
Stars: ✭ 162 (-16.92%)
Mutual labels: graphics, 3d
Vxr
General purpose engine written in C++ with emphasis on materials rendering (PBR, clear coat, anisotropy, iridescence)
Stars: ✭ 181 (-7.18%)
Mutual labels: graphics, 3d
📷 CSS-CAMERA
🎥 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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].