css-camera

new CSSCamera(el, optionsopt)

Source:

CSSCamera.ts, line 189

Create new CSSCamera with given element / selector.

Example

const camera = new CSSCamera("#el", {
  position: [0, 0, 150], // Initial pos(x, y, z)
  rotation: [90, 0, 0],  // Initial rotation(x, y, z, in degree)
  perspective: 300       // CSS "perspective" value to apply
});

Parameters:

Name Type Attributes Default Description

el

string | HTMLElement

The element to apply camera. Can be HTMLElement or CSS selector.

options

Partial.<Options>

{}

Camera options

Properties

Name	Type	Attributes	Default	Description
`position`	Array.<number>	<optional>	`[0, 0, 0]`	Initial position of the camera.
`scale`	Array.<number>	<optional>	`[1, 1, 1]`	Initial scale of the camera.
`rotation`	Array.<number>	<optional>	`[0, 0, 0]`	Initial Euler rotation angles(x, y, z) of the camera in degree.
`perspective`	number	<optional>	`0`	Initial perspective of the camera.
`rotateOffset`	number	<optional>	`0`	Initial rotate offset of the camera.

Members

(static) VERSION :string

Source:

CSSCamera.ts, line 26

Current version of CSSCamera.

Type:

string

Example

console.log(CSSCamera.VERSION); // ex) 1.0.0

cameraCSS :string

Source:

CSSCamera.ts, line 139

CSS string can be applied to camera element based on current transform.

Type:

string

Example

const camera = new CSSCamera(el);
camera.perspective = 300;
console.log(camera.cameraCSS); // scale3d(1, 1, 1) translateZ(300px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);

cameraEl :HTMLElement

Source:

CSSCamera.ts, line 47

The reference of camera DOM element.

Type:

HTMLElement

element :HTMLElement

Source:

CSSCamera.ts, line 35

The element provided in the constructor.

Type:

HTMLElement

Example

const camera = new CSSCamera(el);
console.log(camera.element === el); // true

perspective :number

Source:

CSSCamera.ts, line 114

The current perspective value that will be applied to viewport element.

Type:

number

Example

const camera = new CSSCamera(el);
camera.perspective = 300;
console.log(camera.perspective); // 300

position :Array.<number>

Source:

CSSCamera.ts, line 64

The current position as number array([x, y, z]).

Type:

Array.<number>

Example

const camera = new CSSCamera(el);
console.log(camera.position); // [0, 0, 0];
camera.position = [0, 0, 300];
console.log(camera.position); // [0, 0, 300];

quaternion :Array.<number>

Source:

CSSCamera.ts, line 99

The current quaternion rotation as number array([x, y, z, w]).

Type:

Array.<number>

Example

const camera = new CSSCamera(el);
console.log(camera.quaternion); // [0, 0, 0, 1];
camera.rotation = [90, 0, 0];
console.log(camera.quaternion); // [0.7071067690849304, 0, 0, 0.7071067690849304];
camera.quaternion = [0, 0, 0, 1];
console.log(camera.rotation); // [0, -0, 0];

rotateOffset :number

Source:

CSSCamera.ts, line 129

The current rotate offset value that will be applied to camera element.
The camera will be as far away from the focal point as this value.

Type:

number

Example

const camera = new CSSCamera(el);
camera.perspective = 300;
console.log(camera.cameraCSS); // scale3d(1, 1, 1) translateZ(300px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
camera.rotateOffset = 100;
console.log(camera.cameraCSS); // scale3d(1, 1, 1) translateZ(400px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);

rotation :Array.<number>

Source:

CSSCamera.ts, line 86

The current Euler rotation angles in degree as number array([x, y, z]).

Type:

Array.<number>

Example

const camera = new CSSCamera(el);
console.log(camera.rotation); // [0, 0, 0];
camera.rotation = [90, 0, 0];
console.log(camera.rotation); // [90, 0, 0];

scale :Array.<number>

Source:

CSSCamera.ts, line 75

The current scale as number array([x, y, z]).

Type:

Array.<number>

Example

const camera = new CSSCamera(el);
console.log(camera.scale); // [1, 1, 1];
camera.scale = [5, 1, 1];
console.log(camera.scale); // [5, 1, 1];

viewportEl :HTMLElement

Source:

CSSCamera.ts, line 41

The reference of viewport DOM element.

Type:

HTMLElement

worldCSS :string

Source:

CSSCamera.ts, line 160

CSS string can be applied to world element based on current transform.

const camera = new CSSCamera(el);
console.log(camera.worldCSS); // "translate3d(0px, 0px, 0px)";
camera.translate(0, 0, 300);
console.log(camera.worldCSS); // "translate3d(0px, 0px, -300px)";

Type:

string

worldEl :HTMLElement

Source:

CSSCamera.ts, line 53

The reference of world DOM element.

Type:

HTMLElement

Methods

focus(el) → {CSSCamera}

Source:

CSSCamera.ts, line 236

Focus a camera to given element.
After focus, element will be in front of camera with no rotation applied.
Also, it will have original width / height if neither scale nor perspectiveOffset is applied.
This method won't work if any of element's parent except camera element has scale applied.

Parameters:

Name	Type	Description
`el`	string \| HTMLElement	The element to focus. Can be HTMLElement or CSS selector.

Returns:

The instance itself

Type: CSSCamera

rotate(xopt, yopt, zopt) → {CSSCamera}

Source:

CSSCamera.ts, line 295

Rotate a camera in world(absolute) coordinate space.

Parameters:

Name	Type	Attributes	Default	Description
`x`	number	<optional>	`0`	Amount of rotation in x axis, in degree.
`y`	number	<optional>	`0`	Amount of rotation in y axis, in degree.
`z`	number	<optional>	`0`	Amount of rotation in z axis, in degree.

Returns:

The instance itself

Type: CSSCamera

translate(xopt, yopt, zopt) → {CSSCamera}

Source:

CSSCamera.ts, line 282

Translate a camera in world(absolute) coordinate space.

Parameters:

Name	Type	Attributes	Default	Description
`x`	number	<optional>	`0`	Amount of translation in x axis, in px.
`y`	number	<optional>	`0`	Amount of translation in y axis, in px.
`z`	number	<optional>	`0`	Amount of translation in z axis, in px.

Returns:

The instance itself

Type: CSSCamera

translateLocal(xopt, yopt, zopt) → {CSSCamera}

Source:

CSSCamera.ts, line 262

Translate a camera in its local coordinate space.
For example, camera.translateLocal(0, 0, -300) will always move camera to direction where it's seeing.

Parameters:

Name	Type	Attributes	Default	Description
`x`	number	<optional>	`0`	Amount of horizontal translation, in px.
`y`	number	<optional>	`0`	Amount of vertical translation, in px.
`z`	number	<optional>	`0`	Amount of translation in view direction, in px.

Returns:

The instance itself

Type: CSSCamera

(async) update(durationopt, optionsopt) → {Promise.<CSSCamera>}

Source:

CSSCamera.ts, line 329

Updates a camera CSS with given duration.
Every other camera transforming properties / methods will be batched until this method is called.

Example

const camera = new CSSCamera(el);
console.log(camera.cameraEl.style.transform); // ''

camera.perspective = 300;
camera.translate(0, 0, 300);
camera.rotate(0, 90, 0);
console.log(camera.cameraEl.style.transform); // '', Not changed!

await camera.update(1000); // Camera style is updated.
console.log(camera.cameraEl.style.transform); // scale3d(1, 1, 1) translateZ(300px) rotateX(0deg) rotateY(90deg) rotateZ(0deg)

// When if you want to apply multiple properties
camera.update(1000, {
  property: "transform, background-color",
  timingFunction: "ease-out, ease-out", // As same with CSS, you should assign values to each property
  delay: "0ms, 100ms"
});

Parameters:

Name Type Attributes Default Description

duration

number

0

Transition duration in ms.

options

Partial.<UpdateOption>

{}

Transition options.

Properties

Name	Type	Attributes	Default	Description
`property`	string	<optional>	`"transform"`	CSS transition-property to apply.
`timingFunction`	string	<optional>	`"ease-out"`	CSS transition-timing-function to apply.
`delay`	string	<optional>	`"0ms"`	CSS transition-delay to apply.

Returns:

A promise resolving instance itself

Type: Promise.<CSSCamera>