1.2.0 • Published 11 months ago

cube-3d-js v1.2.0

Weekly downloads
-
License
MIT
Repository
github
Last release
11 months ago

cube-3d-js

NPM Version build License

ko-fi

Provides a 3D cube carousel display with perspective.

Installation

You can install this library using npm:

npm install cube-3d-js

Usage

HTML

<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>

JavaScript

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);

API Documentation

init(targetId: string, config?: Cube3DConfig)

Initializes the application with optional configuration parameters.

  • targetId (string, optional): The ID of the target element (default is cube-3d).
  • config (object, optional): Optional configuration object for width, height, baseId, initialRotation, intensity, scrollIntensity, and swipeIntensity.

Config

Property NameDescriptionDefault Value
widthSets the width.500
heightSets the height.500
baseIdSets the baseElement ID.cube-3d-base
initialRotationSets the initial rotation degree.0
intensitySets the intensity of light.0.2
scrollIntensitySets the intensity of light on scroll.1.5
swipeIntensitySets the intensity of light on swipe.75

onRotate(callback: (currentFaceIndex: number, previousFaceIndex: number) => void)

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.

getFaceByIndex(index: number): HTMLElement

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.

License

This project is licensed under the MIT License - see the LICENSE file for details.

cubecarousel3D
@everything-registry/sub-chunk-1424
1.1.219

12 months ago

1.1.463

12 months ago

1.1.342

12 months ago

1.1.221

12 months ago

1.1.462

12 months ago

1.1.341

12 months ago

1.1.220

12 months ago

1.1.461

12 months ago

1.1.340

12 months ago

1.1.460

12 months ago

1.1.229

12 months ago

1.1.349

12 months ago

1.1.228

12 months ago

1.1.469

12 months ago

1.1.348

12 months ago

1.1.227

12 months ago

1.1.468

12 months ago

1.1.347

12 months ago

1.1.226

12 months ago

1.1.467

12 months ago

1.1.346

12 months ago

1.1.225

12 months ago

1.1.466

12 months ago

1.1.345

12 months ago

1.1.224

12 months ago

1.1.465

12 months ago

1.1.344

12 months ago

1.1.223

12 months ago

1.1.464

12 months ago

1.1.343

12 months ago

1.1.222

12 months ago

1.1.329

12 months ago

1.1.452

12 months ago

1.1.331

12 months ago

1.1.451

12 months ago

1.1.330

12 months ago

1.1.450

12 months ago

1.1.339

12 months ago

1.1.218

12 months ago

1.1.459

12 months ago

1.1.338

12 months ago

1.1.217

12 months ago

1.1.458

12 months ago

1.1.337

12 months ago

1.1.216

12 months ago

1.1.457

12 months ago

1.1.336

12 months ago

1.1.456

12 months ago

1.1.335

12 months ago

1.1.455

12 months ago

1.1.334

12 months ago

1.1.454

12 months ago

1.1.333

12 months ago

1.1.453

12 months ago

1.1.332

12 months ago

1.1.364

12 months ago

1.1.243

12 months ago

1.1.363

12 months ago

1.1.242

12 months ago

1.1.362

12 months ago

1.1.241

12 months ago

1.1.361

12 months ago

1.1.240

12 months ago

1.1.360

12 months ago

1.1.249

12 months ago

1.1.369

12 months ago

1.1.248

12 months ago

1.1.368

12 months ago

1.1.247

12 months ago

1.1.367

12 months ago

1.1.246

12 months ago

1.1.366

12 months ago

1.1.245

12 months ago

1.1.365

12 months ago

1.1.244

12 months ago

1.1.474

12 months ago

1.1.353

12 months ago

1.1.232

12 months ago

1.1.473

12 months ago

1.1.352

12 months ago

1.1.231

12 months ago

1.1.472

12 months ago

1.1.351

12 months ago

1.1.230

12 months ago

1.1.471

12 months ago

1.1.350

12 months ago

1.1.470

12 months ago

1.1.239

12 months ago

1.1.359

12 months ago

1.1.238

12 months ago

1.1.358

12 months ago

1.1.237

12 months ago

1.1.357

12 months ago

1.1.236

12 months ago

1.1.356

12 months ago

1.1.235

12 months ago

1.1.355

12 months ago

1.1.234

12 months ago

1.1.354

12 months ago

1.1.233

12 months ago

1.1.419

12 months ago

1.1.418

12 months ago

1.1.417

12 months ago

1.1.427

12 months ago

1.1.306

12 months ago

1.1.426

12 months ago

1.1.305

12 months ago

1.1.425

12 months ago

1.1.304

12 months ago

1.1.424

12 months ago

1.1.303

12 months ago

1.1.423

12 months ago

1.1.302

12 months ago

1.1.422

12 months ago

1.1.301

12 months ago

1.1.421

12 months ago

1.1.300

12 months ago

1.1.420

12 months ago

1.1.409

12 months ago

1.1.408

12 months ago

1.1.407

12 months ago

1.1.406

12 months ago

1.1.416

12 months ago

1.1.415

12 months ago

1.1.414

12 months ago

1.1.413

12 months ago

1.1.412

12 months ago

1.1.411

12 months ago

1.1.410

12 months ago

1.1.319

12 months ago

1.1.439

12 months ago

1.1.318

12 months ago

1.1.441

12 months ago

1.1.320

12 months ago

1.1.440

12 months ago

1.1.449

12 months ago

1.1.328

12 months ago

1.1.448

12 months ago

1.1.327

12 months ago

1.1.447

12 months ago

1.1.326

12 months ago

1.1.446

12 months ago

1.1.325

12 months ago

1.1.445

12 months ago

1.1.324

12 months ago

1.1.444

12 months ago

1.1.323

12 months ago

1.1.443

12 months ago

1.1.322

12 months ago

1.1.442

12 months ago

1.1.321

12 months ago

1.1.309

12 months ago

1.1.429

12 months ago

1.1.308

12 months ago

1.1.428

12 months ago

1.1.307

12 months ago

1.1.430

12 months ago

1.1.438

12 months ago

1.1.317

12 months ago

1.1.437

12 months ago

1.1.316

12 months ago

1.1.436

12 months ago

1.1.315

12 months ago

1.1.435

12 months ago

1.1.314

12 months ago

1.1.434

12 months ago

1.1.313

12 months ago

1.1.433

12 months ago

1.1.312

12 months ago

1.1.432

12 months ago

1.1.311

12 months ago

1.1.431

12 months ago

1.1.310

12 months ago

1.1.290

12 months ago

1.1.298

12 months ago

1.1.297

12 months ago

1.1.296

12 months ago

1.1.295

12 months ago

1.1.294

12 months ago

1.1.293

12 months ago

1.1.292

12 months ago

1.1.291

12 months ago

1.1.299

12 months ago

1.1.386

12 months ago

1.1.265

12 months ago

1.1.385

12 months ago

1.1.264

12 months ago

1.1.384

12 months ago

1.1.263

12 months ago

1.1.383

12 months ago

1.1.262

12 months ago

1.1.382

12 months ago

1.1.261

12 months ago

1.1.381

12 months ago

1.1.260

12 months ago

1.1.380

12 months ago

1.1.269

12 months ago

1.1.389

12 months ago

1.1.268

12 months ago

1.1.388

12 months ago

1.1.267

12 months ago

1.1.387

12 months ago

1.1.266

12 months ago

1.1.375

12 months ago

1.1.254

12 months ago

1.1.374

12 months ago

1.1.253

12 months ago

1.1.373

12 months ago

1.1.252

12 months ago

1.1.372

12 months ago

1.1.251

12 months ago

1.1.371

12 months ago

1.1.250

12 months ago

1.1.370

12 months ago

1.1.259

12 months ago

1.1.379

12 months ago

1.1.258

12 months ago

1.1.378

12 months ago

1.1.257

12 months ago

1.1.377

12 months ago

1.1.256

12 months ago

1.1.376

12 months ago

1.1.255

12 months ago

1.1.287

12 months ago

1.1.286

12 months ago

1.1.285

12 months ago

1.1.284

12 months ago

1.1.283

12 months ago

1.1.282

12 months ago

1.1.281

12 months ago

1.1.280

12 months ago

1.1.289

12 months ago

1.1.288

12 months ago

1.1.397

12 months ago

1.1.276

12 months ago

1.1.396

12 months ago

1.1.275

12 months ago

1.1.395

12 months ago

1.1.274

12 months ago

1.1.394

12 months ago

1.1.273

12 months ago

1.1.393

12 months ago

1.1.272

12 months ago

1.1.392

12 months ago

1.1.271

12 months ago

1.1.391

12 months ago

1.1.270

12 months ago

1.1.390

12 months ago

1.1.279

12 months ago

1.1.399

12 months ago

1.1.278

12 months ago

1.1.398

12 months ago

1.1.277

12 months ago

1.2.0

11 months ago

1.1.405

12 months ago

1.1.404

12 months ago

1.1.403

12 months ago

1.1.402

12 months ago

1.1.401

12 months ago

1.1.400

12 months ago

1.1.100

1 year ago

1.1.108

1 year ago

1.1.107

1 year ago

1.1.106

1 year ago

1.1.105

1 year ago

1.1.104

1 year ago

1.1.103

1 year ago

1.1.102

1 year ago

1.1.101

1 year ago

1.1.209

1 year ago

1.1.208

1 year ago

1.1.210

1 year ago

1.1.215

1 year ago

1.1.214

1 year ago

1.1.213

1 year ago

1.1.212

1 year ago

1.1.211

1 year ago

1.1.122

1 year ago

1.1.92

1 year ago

1.1.121

1 year ago

1.1.91

1 year ago

1.1.120

1 year ago

1.1.90

1 year ago

1.1.96

1 year ago

1.1.95

1 year ago

1.1.94

1 year ago

1.1.93

1 year ago

1.1.129

1 year ago

1.1.99

1 year ago

1.1.128

1 year ago

1.1.98

1 year ago

1.1.127

1 year ago

1.1.97

1 year ago

1.1.126

1 year ago

1.1.125

1 year ago

1.1.124

1 year ago

1.1.123

1 year ago

1.1.109

1 year ago

1.1.111

1 year ago

1.1.110

1 year ago

1.1.119

1 year ago

1.1.118

1 year ago

1.1.117

1 year ago

1.1.116

1 year ago

1.1.115

1 year ago

1.1.114

1 year ago

1.1.113

1 year ago

1.1.112

1 year ago

1.1.70

1 year ago

1.1.74

1 year ago

1.1.73

1 year ago

1.1.72

1 year ago

1.1.71

1 year ago

1.1.78

1 year ago

1.1.77

1 year ago

1.1.76

1 year ago

1.1.75

1 year ago

1.1.79

1 year ago

1.1.81

1 year ago

1.1.80

1 year ago

1.1.85

1 year ago

1.1.84

1 year ago

1.1.83

1 year ago

1.1.82

1 year ago

1.1.89

1 year ago

1.1.88

1 year ago

1.1.87

1 year ago

1.1.86

1 year ago

1.1.52

1 year ago

1.1.51

1 year ago

1.1.50

1 year ago

1.1.207

1 year ago

1.1.56

1 year ago

1.1.206

1 year ago

1.1.55

1 year ago

1.1.205

1 year ago

1.1.54

1 year ago

1.1.204

1 year ago

1.1.53

1 year ago

1.1.203

1 year ago

1.1.202

1 year ago

1.1.59

1 year ago

1.1.201

1 year ago

1.1.58

1 year ago

1.1.200

1 year ago

1.1.57

1 year ago

1.1.63

1 year ago

1.1.62

1 year ago

1.1.61

1 year ago

1.1.60

1 year ago

1.1.67

1 year ago

1.1.66

1 year ago

1.1.65

1 year ago

1.1.64

1 year ago

1.1.69

1 year ago

1.1.68

1 year ago

1.1.29

1 year ago

1.1.28

1 year ago

1.1.180

1 year ago

1.1.188

1 year ago

1.1.187

1 year ago

1.1.186

1 year ago

1.1.185

1 year ago

1.1.184

1 year ago

1.1.30

1 year ago

1.1.183

1 year ago

1.1.182

1 year ago

1.1.181

1 year ago

1.1.34

1 year ago

1.1.33

1 year ago

1.1.32

1 year ago

1.1.31

1 year ago

1.1.38

1 year ago

1.1.37

1 year ago

1.1.36

1 year ago

1.1.189

1 year ago

1.1.35

1 year ago

1.1.39

1 year ago

1.1.177

1 year ago

1.1.176

1 year ago

1.1.175

1 year ago

1.1.174

1 year ago

1.1.173

1 year ago

1.1.41

1 year ago

1.1.172

1 year ago

1.1.40

1 year ago

1.1.171

1 year ago

1.1.170

1 year ago

1.1.45

1 year ago

1.1.44

1 year ago

1.1.43

1 year ago

1.1.42

1 year ago

1.1.49

1 year ago

1.1.48

1 year ago

1.1.179

1 year ago

1.1.47

1 year ago

1.1.178

1 year ago

1.1.46

1 year ago

1.1.9

1 year ago

1.1.8

1 year ago

1.1.7

1 year ago

1.1.6

1 year ago

1.1.5

1 year ago

1.1.4

1 year ago

1.1.3

1 year ago

1.1.12

1 year ago

1.1.11

1 year ago

1.1.10

1 year ago

1.1.16

1 year ago

1.1.15

1 year ago

1.1.14

1 year ago

1.1.13

1 year ago

1.1.19

1 year ago

1.1.18

1 year ago

1.1.17

1 year ago

1.1.191

1 year ago

1.1.190

1 year ago

1.1.199

1 year ago

1.1.198

1 year ago

1.1.197

1 year ago

1.1.196

1 year ago

1.1.195

1 year ago

1.1.194

1 year ago

1.1.193

1 year ago

1.1.192

1 year ago

1.1.23

1 year ago

1.1.22

1 year ago

1.1.21

1 year ago

1.1.20

1 year ago

1.1.27

1 year ago

1.1.26

1 year ago

1.1.25

1 year ago

1.1.24

1 year ago

1.1.144

1 year ago

1.1.143

1 year ago

1.1.142

1 year ago

1.1.141

1 year ago

1.1.140

1 year ago

1.1.149

1 year ago

1.1.148

1 year ago

1.1.147

1 year ago

1.1.146

1 year ago

1.1.145

1 year ago

1.1.133

1 year ago

1.1.132

1 year ago

1.1.131

1 year ago

1.1.130

1 year ago

1.1.139

1 year ago

1.1.138

1 year ago

1.1.137

1 year ago

1.1.136

1 year ago

1.1.135

1 year ago

1.1.134

1 year ago

1.1.166

1 year ago

1.1.165

1 year ago

1.1.164

1 year ago

1.1.163

1 year ago

1.1.162

1 year ago

1.1.161

1 year ago

1.1.160

1 year ago

1.1.169

1 year ago

1.1.168

1 year ago

1.1.167

1 year ago

1.1.155

1 year ago

1.1.154

1 year ago

1.1.153

1 year ago

1.1.152

1 year ago

1.1.151

1 year ago

1.1.150

1 year ago

1.1.159

1 year ago

1.1.158

1 year ago

1.1.157

1 year ago

1.1.156

1 year ago

1.1.2

1 year ago

1.1.1

1 year ago

1.1.0

1 year ago

1.0.36

1 year ago

1.0.35

1 year ago

1.0.33

1 year ago

1.0.32

1 year ago

1.0.29

1 year ago

1.0.28

1 year ago

1.0.27

1 year ago

1.0.31

1 year ago

1.0.26

2 years ago

1.0.25

2 years ago

1.0.24

2 years ago

1.0.23

2 years ago

1.0.22

2 years ago

1.0.21

2 years ago

1.0.19

2 years ago

1.0.20

2 years ago

1.0.18

2 years ago

1.0.17

2 years ago

1.0.16

2 years ago

1.0.15

2 years ago

1.0.14

2 years ago

1.0.13

2 years ago

1.0.9

2 years ago

1.0.11

2 years ago

1.0.10

2 years ago

1.0.12

2 years ago

1.0.8

2 years ago

1.0.7

2 years ago

1.0.6

2 years ago

1.0.5

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago