Provides a 3D cube carousel display with perspective.
You can install this library using npm:
npm install cube-3d-js<body>
<div id="cube-3d">
<div><h1>1</h1></div>
<div><h1>2</h1></div>
<div><h1>3</h1></div>
</div>
<style>
#cube-3d-base > div {
box-sizing: border-box;
border: 0.5px solid black;
color: blue;
background-color: rgb(255 255 255 / 0.5);
}
</style>
</body>import { init, onRotate, getFaceByIndex } from "cube-3d";
// Initialize the library with optional configuration
init("cube-3d", {
width: 500,
height: 500,
initialRotation: 0,
});
// Register a callback for when the rotation changes
onRotate((currentFaceIndex: number, previousFaceIndex: number) => {
// Your callback logic here
console.log(
`Face index changed from: ${previousFaceIndex} to: ${currentFaceIndex}`,
);
});
// Retrieve a specific face element by index
const faceElement = getFaceByIndex(1);Initializes the application with optional configuration parameters.
-
targetId(string, optional): The ID of the target element (default iscube-3d). -
config(object, optional): Optional configuration object for width, height, baseId, initialRotation, intensity, scrollIntensity, and swipeIntensity.
| Property Name | Description | Default Value |
|---|---|---|
width |
Sets the width. | 500 |
height |
Sets the height. | 500 |
baseId |
Sets the baseElement ID. | cube-3d-base |
initialRotation |
Sets the initial rotation degree. | 0 |
intensity |
Sets the intensity of light. | 0.2 |
scrollIntensity |
Sets the intensity of light on scroll. | 1.5 |
swipeIntensity |
Sets the intensity of light on swipe. | 75 |
Registers a callback function to be executed when the rotation changes.
-
callback(function): A function to call when the rotation changes with the detected face index and the previous face index.
Retrieves a specific face element by its index.
-
index(number): The index of the face element to retrieve. - Returns: The element corresponding to the specified index.
This project is licensed under the MIT License - see the LICENSE file for details.