Types

Types reference for the Web Cube element.

Also see Utilities, Events, and Getters.

State types

Face Enum

The Face enum represents the faces of a cube. It includes the following values:

  • Face.Front: Represents the front face of the cube. Has a value of 0.
  • Face.Back: Represents the back face of the cube. Has a value of 1.
  • Face.Left: Represents the left face of the cube. Has a value of 2.
  • Face.Right: Represents the right face of the cube. Has a value of 3.
  • Face.Up: Represents the top face of the cube. Has a value of 4.
  • Face.Down: Represents the bottom face of the cube. Has a value of 5.

FlatState Type

The FlatState type is an object that represents a flat representation of the state of a cube. It includes the following properties:

  • [Face.Up]: A 2D array of Face values representing the top face of the cube.
  • [Face.Down]: A 2D array of Face values representing the bottom face of the cube.
  • [Face.Left]: A 2D array of Face values representing the left face of the cube.
  • [Face.Right]: A 2D array of Face values representing the right face of the cube.
  • [Face.Front]: A 2D array of Face values representing the front face of the cube.
  • [Face.Back]: A 2D array of Face values representing the back face of the cube.

Rotation options types

CubeRotationOptions Type

The CubeRotationOptions type represents the options for rotating the entire cube. It includes the following properties:

  • axis: The axis to rotate the cube. Must be "x", "y", or "z".
  • angle: The angle to rotate the cube. Must be 90, 180, 270, or 360.
  • backwards?: Optional. Whether to rotate the cube backwards. Defaults to false.
  • speed?: Optional. The speed of the rotation in milliseconds. Defaults to the instance speed.

LayerRotationOptions Type

The LayerRotationOptions type represents the options for rotating a layer of the cube. It includes the following properties:

  • axis: The axis of the layer to rotate. Must be "x", "y", or "z".
  • layer: The index of the layer to rotate. Must be between 0 and the size of the cube.
  • angle: The angle to rotate the layer. Must be 90, 180, 270, or 360.
  • backwards?: Optional. Whether to rotate the layer backwards. Defaults to false.
  • speed?: Optional. The speed of the rotation in milliseconds. Defaults to the instance speed.

RotationOptions Type

The RotationOptions type represents the options for rotating either the entire cube or a layer of the cube. It includes the following properties:

  • type: The type of rotation. Must be "cube" or "layer".
  • axis: The axis to rotate the cube. Must be "x", "y", or "z".
  • layer?: Optional. The index of the layer to rotate. Must be between 0 and the size of the cube. Only required if type is "layer".
  • angle: The angle to rotate the cube. Must be 90, 180, 270, or 360.
  • backwards?: Optional. Whether to rotate the cube backwards. Defaults to false.
  • speed?: Optional. The speed of the rotation in milliseconds. Defaults to the instance speed.

Event types

RotationEvent Type

Custom event type emitted by rotation lifecycle events in Events.

StateChangeEvent Type

Custom event type emitted by web-cube:state-changed.

RotationEventDetail Type

Detail payload for rotation events. Contains:

  • type: "cube" or "layer"
  • axis: "x" | "y" | "z"
  • angle: number
  • fromAngle: number
  • toAngle: number
  • backwards: boolean
  • speed: number
  • triggeredBy: "pointer-event" | "function-call"
  • layer: number (only when type is "layer")
Utilities CSS Variables
© 2026 Axford