\n
\n \n
\n \n
\n โ
\n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n
\n \n
\n \n \n \n \n \n \n \n \n \n
\n Click the screen to control
\n \n \n\n"
},
{
"path": "demo/index.html",
"content": "\n\n \n \n \n \n
\n \n
\n \n
\n CSS-CAMERA
\nAdd depth to your web page with CSS3 3D transform.
\n \n \n Documents\n \n \n \n Github\n \n\n
\n \n
\n Install
\n$ npm i css-camera
\n \n
\n \n
\n \n
\n \n \n \n \n
\n \n
\n \n
\n\n \n \n ![\"Placeholder](\"https://avatars0.githubusercontent.com/u/26213435?s=460&v=4\")
\n \n
\n \n \n
\n WoodNeck
\n@woodneck
\n\n You can put any HTML element you like, then just transform it.\n @css-camera will do the rest for you.\n
\n \n
\n\n It's super simple!
\n// Prerequisite:\n// Create your scene as you like\nconst card = document.querySelector(\"#card\");\nconst cardButton = document.querySelector(\"#card-button\");\n\n// First, make camera\nconst camera = new CSSCamera(\"#space\");\n\n// Call its method, then update it!\ncardButton.onclick = () => {\n // Move camera in front of \"card\"\n camera.focus(card);\n camera.update(2000);\n}See the source of this page.
\n\n
\n More demos?
\n\n
\n \n
\n \n \n ![](\"./asset/ortho-thumb.png\")
\n \n \n
\n \n \n
\n \n \n ![](\"./asset/fpv-thumb.png\")
\n \n \n
\n \n \n
\n
\n \n
\n \n \n \n \n
\n \n \n \n
\n\n \n \n
\n \n \n \n \n \n \n \n\n \n
\n \n \n \n \n \n \n
\n \n\n \n
\n
\n \n
\n \n \n \n \n \n\n \n \n \n \n \n
\n \n \n \n \n\n \n \n \n \n \n \n \n \n
\n \n\n \n \n
\n \n \n \n \n \n \n
\n
All pixelart assets are from https://guttykreum.itch.io/field-of-green
\n \n \n \n\n"
},
{
"path": "jsdoc.json",
"content": "{\n \"tags\": {\n \"allowUnknownTags\" : false,\n \"dictionaries\": [\"jsdoc\", \"closure\"]\n },\n \"source\": {\n \"include\": [\"src\", \"README.md\"],\n \"includePattern\": \".+\\\\.(j|t)s(doc|x)?$\",\n \"excludePattern\": \"(^|\\\\/|\\\\\\\\)_\"\n },\n \"opts\": {\n \"template\": \"node_modules/docdash\",\n \"destination\": \"./docs/\",\n \"ignores\": [],\n \"expendsItemMembers\": true,\n \"recurse\": true\n },\n \"plugins\": [\n \"plugins/markdown\"\n ],\n \"docdash\": {\n \"static\": true,\n \"cleverLinks\": true,\n \"monospaceLinks\": true,\n \"typedefs\": true,\n \"private\": true,\n \"search\": true,\n \"openGraph\": {\n \"title\": \"css-camera\",\n \"type\": \"website\",\n \"site_name\": \"css-camera\",\n \"image\": \"\",\n \"url\": \"https://woodneck.github.io/css-camera/\"\n },\n \"meta\": {\n \"title\": \"css-camera\",\n \"description\": \"Add a depth to your web page with CSS3 3D transform.\",\n \"keyword\": \"css3, camera, graphics, 3d\"\n },\n \"menu\":{\n \"Github\":{\n \"href\":\"https://github.com/WoodNeck/css-camera\",\n \"target\":\"_blank\"\n }\n }\n },\n \"markdown\": {\n \"parser\": \"gfm\",\n \"hardwrap\": true\n }\n}\n"
},
{
"path": "package.json",
"content": "{\n \"name\": \"css-camera\",\n \"version\": \"1.0.1-snapshot\",\n \"description\": \"Add a depth to your web page with CSS3 3D transform.\",\n \"main\": \"lib/css-camera.js\",\n \"module\": \"lib/css-camera.esm.js\",\n \"types\": \"lib/declaration/index.d.ts\",\n \"scripts\": {\n \"build\": \"rm -rf ./lib && rollup -c && npm run declaration\",\n \"build:windows\": \"rd /s /q ./lib || rollup -c && npm run declaration:windows\",\n \"declaration\": \"rm -rf ./lib/declaration && tsc -p tsconfig.json\",\n \"declaration:windows\": \"rd /s /q ./lib || tsc -p tsconfig.json\",\n \"demo:build\": \"npm run build && cpx 'lib/**/*' demo/release/latest/lib --clean\",\n \"demo:prebuild-version\": \"cpx 'lib/**/*' demo/release/$npm_package_version/lib --clean && cpx 'docs/**/*' demo/release/$npm_package_version/docs --clean\",\n \"demo:prebuild-latest\": \"cpx 'lib/**/*' demo/release/latest/lib --clean && cpx 'docs/**/*' demo/release/latest/docs --clean\",\n \"demo:deploy\": \"npm run build && npm run doc && npm run demo:prebuild-version && npm run demo:prebuild-latest && gh-pages -d demo/\",\n \"doc\": \"rm -rf ./docs && jsdoc -c jsdoc.json\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/WoodNeck/css-camera.git\"\n },\n \"author\": \"WoodNeck\",\n \"license\": \"MIT\",\n \"bugs\": {\n \"url\": \"https://github.com/WoodNeck/css-camera/issues\"\n },\n \"homepage\": \"https://github.com/WoodNeck/css-camera#readme\",\n \"devDependencies\": {\n \"@daybrush/jsdoc\": \"^0.3.7\",\n \"@egjs/build-helper\": \"0.0.5\",\n \"@types/gl-matrix\": \"^2.4.5\",\n \"cpx\": \"^1.5.0\",\n \"docdash\": \"^1.1.1\",\n \"gh-pages\": \"2.0.1\",\n \"rollup\": \"^1.10.1\",\n \"rollup-plugin-node-resolve\": \"^4.2.3\",\n \"rollup-plugin-prototype-minify\": \"^1.0.5\",\n \"rollup-plugin-replace\": \"^2.2.0\",\n \"rollup-plugin-typescript\": \"^1.0.1\",\n \"rollup-plugin-uglify\": \"^6.0.2\",\n \"tslint\": \"^5.15.0\",\n \"tslint-consistent-codestyle\": \"^1.15.1\",\n \"tslint-eslint-rules\": \"^5.4.0\",\n \"typescript\": \"^3.4.3\"\n },\n \"dependencies\": {\n \"gl-matrix\": \"^3.0.0\"\n }\n}\n"
},
{
"path": "rollup.config.js",
"content": "const buildHelper = require(\"@egjs/build-helper\");\n\nconst name = \"CSSCamera\";\nconst external = {\n\t\"gl-matrix\": \"gl-matrix\",\n}\nexport default buildHelper([\n {\n name,\n input: \"./src/index.umd.ts\",\n output: \"./lib/css-camera.js\",\n format: \"umd\",\n external,\n },\n {\n name,\n input: \"./src/index.umd.ts\",\n output: \"./lib/css-camera.min.js\",\n format: \"umd\",\n uglify: true,\n external,\n },\n {\n name,\n input: \"./src/index.umd.ts\",\n output: \"./lib/css-camera.pkgd.js\",\n format: \"umd\",\n resolve: true,\n },\n {\n name,\n input: \"./src/index.umd.ts\",\n output: \"./lib/css-camera.pkgd.min.js\",\n format: \"umd\",\n resolve: true,\n uglify: true,\n },\n {\n input: \"./src/index.ts\",\n output: \"./lib/css-camera.esm.js\",\n format: \"esm\",\n external,\n exports: \"named\",\n },\n]);\n"
},
{
"path": "src/CSSCamera.ts",
"content": "import { mat4, vec3, quat } from 'gl-matrix';\nimport { getElement, applyCSS, getTransformMatrix, findIndex, getOffsetFromParent, getRotateOffset, assign } from './utils/helper';\nimport { quatToEuler } from './utils/math';\nimport * as DEFAULT from './constants/default';\nimport { Offset, UpdateOption, ValueOf, Options } from './types';\n\nclass CSSCamera {\n private _element: HTMLElement;\n private _viewportEl: HTMLElement;\n private _cameraEl: HTMLElement;\n private _worldEl: HTMLElement;\n\n private _position: vec3;\n private _scale: vec3;\n private _rotation: vec3;\n private _perspective: number;\n private _rotateOffset: number;\n private _updateTimer: number;\n\n /**\n * Current version of CSSCamera.\n * @example\n * console.log(CSSCamera.VERSION); // ex) 1.0.0\n * @type {string}\n */\n static get VERSION() { return '#__VERSION__#'; }\n\n /**\n * The element provided in the constructor.\n * @example\n * const camera = new CSSCamera(el);\n * console.log(camera.element === el); // true\n * @type {HTMLElement}\n */\n public get element() { return this._element; }\n\n /**\n * The reference of viewport DOM element.\n * @type {HTMLElement}\n */\n public get viewportEl() { return this._viewportEl; }\n\n /**\n * The reference of camera DOM element.\n * @type {HTMLElement}\n */\n public get cameraEl() { return this._cameraEl; }\n\n /**\n * The reference of world DOM element.\n * @type {HTMLElement}\n */\n public get worldEl() { return this._worldEl; }\n\n /**\n * The current position as number array([x, y, z]).\n * @example\n * const camera = new CSSCamera(el);\n * console.log(camera.position); // [0, 0, 0];\n * camera.position = [0, 0, 300];\n * console.log(camera.position); // [0, 0, 300];\n * @type {number[]}\n */\n public get position() { return [...this._position]; }\n\n /**\n * The current scale as number array([x, y, z]).\n * @example\n * const camera = new CSSCamera(el);\n * console.log(camera.scale); // [1, 1, 1];\n * camera.scale = [5, 1, 1];\n * console.log(camera.scale); // [5, 1, 1];\n * @type {number[]}\n */\n public get scale() { return [...this._scale]; }\n\n /**\n * The current Euler rotation angles in degree as number array([x, y, z]).\n * @example\n * const camera = new CSSCamera(el);\n * console.log(camera.rotation); // [0, 0, 0];\n * camera.rotation = [90, 0, 0];\n * console.log(camera.rotation); // [90, 0, 0];\n * @type {number[]}\n */\n public get rotation() { return [...this._rotation]; }\n\n /**\n * The current quaternion rotation as number array([x, y, z, w]).\n * @example\n * const camera = new CSSCamera(el);\n * console.log(camera.quaternion); // [0, 0, 0, 1];\n * camera.rotation = [90, 0, 0];\n * console.log(camera.quaternion); // [0.7071067690849304, 0, 0, 0.7071067690849304];\n * camera.quaternion = [0, 0, 0, 1];\n * console.log(camera.rotation); // [0, -0, 0];\n * @type {number[]}\n */\n public get quaternion() {\n const r = this._rotation;\n const quaternion = quat.fromEuler(quat.create(), r[0], r[1], r[2]);\n\n return [...quaternion];\n }\n\n /**\n * The current perspective value that will be applied to viewport element.\n * @example\n * const camera = new CSSCamera(el);\n * camera.perspective = 300;\n * console.log(camera.perspective); // 300\n * @type {number}\n */\n public get perspective() { return this._perspective; }\n\n /**\n * The current rotate offset value that will be applied to camera element.\n * The camera will be as far away from the focal point as this value.\n * |||\n * |:---:|:---:|\n * @example\n * const camera = new CSSCamera(el);\n * camera.perspective = 300;\n * console.log(camera.cameraCSS); // scale3d(1, 1, 1) translateZ(300px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);\n * camera.rotateOffset = 100;\n * console.log(camera.cameraCSS); // scale3d(1, 1, 1) translateZ(400px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);\n * @type {number}\n */\n public get rotateOffset() { return this._rotateOffset; }\n\n /**\n * CSS string can be applied to camera element based on current transform.\n * @example\n * const camera = new CSSCamera(el);\n * camera.perspective = 300;\n * console.log(camera.cameraCSS); // scale3d(1, 1, 1) translateZ(300px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);\n * @type {string}\n */\n public get cameraCSS() {\n const perspective = this._perspective;\n const rotateOffset = this._rotateOffset;\n const rotation = this._rotation;\n const scale = this._scale;\n\n // Rotate in order of Z - Y - X\n // tslint:disable-next-line: max-line-length\n return `scale3d(${scale[0]}, ${scale[1]}, ${scale[2]}) translateZ(${perspective - rotateOffset}px) rotateX(${rotation[0]}deg) rotateY(${rotation[1]}deg) rotateZ(${rotation[2]}deg)`;\n }\n\n /**\n * CSS string can be applied to world element based on current transform.\n * ```\n * const camera = new CSSCamera(el);\n * console.log(camera.worldCSS); // \"translate3d(0px, 0px, 0px)\";\n * camera.translate(0, 0, 300);\n * console.log(camera.worldCSS); // \"translate3d(0px, 0px, -300px)\";\n * ```\n * @type {string}\n */\n public get worldCSS() {\n const position = this._position;\n\n return `translate3d(${-position[0]}px, ${-position[1]}px, ${-position[2]}px)`;\n }\n\n public set position(val: number[]) { this._position = vec3.fromValues(val[0], val[1], val[2]); }\n public set scale(val: number[]) { this._scale = vec3.fromValues(val[0], val[1], val[2]); }\n public set rotation(val: number[]) { this._rotation = vec3.fromValues(val[0], val[1], val[2]); }\n public set quaternion(val: number[]) { this._rotation = quatToEuler(quat.fromValues(val[0], val[1], val[2], val[3])); }\n public set perspective(val: number) { this._perspective = val; }\n public set rotateOffset(val: number) { this._rotateOffset = val; }\n\n /**\n * Create new CSSCamera with given element / selector.\n * @param - The element to apply camera. Can be HTMLElement or CSS selector.\n * @param {Partial\n
\n \n \n\n"
},
{
"path": "tsconfig.json",
"content": "{\n \"compilerOptions\": {\n \"target\": \"es5\",\n\n // Module\n \"module\": \"es2015\",\n \"moduleResolution\": \"node\",\n \"allowSyntheticDefaultImports\": true,\n \"esModuleInterop\": true,\n\n // Path\n \"rootDir\": \"./src\",\n \"outDir\": \"./lib/\",\n\n // Delcaration\n \"declaration\": true,\n \"declarationDir\": \"./lib/declaration\",\n\n // Log\n \"pretty\": true,\n\n // Lint\n \"strict\": true,\n \"allowUnreachableCode\": false,\n \"allowUnusedLabels\": false,\n \"noFallthroughCasesInSwitch\": true,\n \"noImplicitReturns\": true,\n \"noUnusedLocals\": true,\n \"noUnusedParameters\": true,\n \"newLine\": \"lf\",\n\n // Outfile\n \"charset\": \"utf8\",\n \"removeComments\": true,\n \"noEmitOnError\": true,\n\n // SourceMap\n \"sourceMap\": true,\n\n // etc\n \"importHelpers\": true,\n \"downlevelIteration\": true\n },\n \"include\": [\n \"./src/**/*.ts\"\n ]\n }\n"
},
{
"path": "tslint.json",
"content": "{\n \"defaultSeverity\": \"error\",\n \"extends\": [\n \"tslint:recommended\"\n ],\n \"rulesDirectory\": [\n \"tslint-consistent-codestyle\",\n \"tslint-eslint-rules\"\n ],\n \"rules\": {\n \"quotemark\": [true, \"single\"],\n \"variable-name\": false,\n \"arrow-parens\": false,\n \"object-literal-key-quotes\": false,\n \"object-literal-sort-keys\": false,\n \"object-literal-shorthand\": false,\n \"ordered-imports\": false,\n \"no-console\": false,\n \"curly\": false,\n \"adjacent-overload-signatures\": false,\n \"no-bitwise\": false,\n \"interface-name\": false,\n \"max-line-length\": false\n },\n \"linterOptions\": {\n \"exclude\": [\n \"node_modules/**/*\"\n ]\n }\n }\n"
}
]\n TEXT\n
ห\n \n TEXT\n
\n \n \n TEXT\n
\n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n
\n