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

11 months ago

1.1.463

11 months ago

1.1.342

11 months ago

1.1.221

11 months ago

1.1.462

11 months ago

1.1.341

11 months ago

1.1.220

11 months ago

1.1.461

11 months ago

1.1.340

11 months ago

1.1.460

11 months ago

1.1.229

11 months ago

1.1.349

11 months ago

1.1.228

11 months ago

1.1.469

11 months ago

1.1.348

11 months ago

1.1.227

11 months ago

1.1.468

11 months ago

1.1.347

11 months ago

1.1.226

11 months ago

1.1.467

11 months ago

1.1.346

11 months ago

1.1.225

11 months ago

1.1.466

11 months ago

1.1.345

11 months ago

1.1.224

11 months ago

1.1.465

11 months ago

1.1.344

11 months ago

1.1.223

11 months ago

1.1.464

11 months ago

1.1.343

11 months ago

1.1.222

11 months ago

1.1.329

11 months ago

1.1.452

11 months ago

1.1.331

11 months ago

1.1.451

11 months ago

1.1.330

11 months ago

1.1.450

11 months ago

1.1.339

11 months ago

1.1.218

11 months ago

1.1.459

11 months ago

1.1.338

11 months ago

1.1.217

11 months ago

1.1.458

11 months ago

1.1.337

11 months ago

1.1.216

11 months ago

1.1.457

11 months ago

1.1.336

11 months ago

1.1.456

11 months ago

1.1.335

11 months ago

1.1.455

11 months ago

1.1.334

11 months ago

1.1.454

11 months ago

1.1.333

11 months ago

1.1.453

11 months ago

1.1.332

11 months ago

1.1.364

11 months ago

1.1.243

11 months ago

1.1.363

11 months ago

1.1.242

11 months ago

1.1.362

11 months ago

1.1.241

11 months ago

1.1.361

11 months ago

1.1.240

11 months ago

1.1.360

11 months ago

1.1.249

11 months ago

1.1.369

11 months ago

1.1.248

11 months ago

1.1.368

11 months ago

1.1.247

11 months ago

1.1.367

11 months ago

1.1.246

11 months ago

1.1.366

11 months ago

1.1.245

11 months ago

1.1.365

11 months ago

1.1.244

11 months ago

1.1.474

11 months ago

1.1.353

11 months ago

1.1.232

11 months ago

1.1.473

11 months ago

1.1.352

11 months ago

1.1.231

11 months ago

1.1.472

11 months ago

1.1.351

11 months ago

1.1.230

11 months ago

1.1.471

11 months ago

1.1.350

11 months ago

1.1.470

11 months ago

1.1.239

11 months ago

1.1.359

11 months ago

1.1.238

11 months ago

1.1.358

11 months ago

1.1.237

11 months ago

1.1.357

11 months ago

1.1.236

11 months ago

1.1.356

11 months ago

1.1.235

11 months ago

1.1.355

11 months ago

1.1.234

11 months ago

1.1.354

11 months ago

1.1.233

11 months ago

1.1.419

11 months ago

1.1.418

11 months ago

1.1.417

11 months ago

1.1.427

11 months ago

1.1.306

11 months ago

1.1.426

11 months ago

1.1.305

11 months ago

1.1.425

11 months ago

1.1.304

11 months ago

1.1.424

11 months ago

1.1.303

11 months ago

1.1.423

11 months ago

1.1.302

11 months ago

1.1.422

11 months ago

1.1.301

11 months ago

1.1.421

11 months ago

1.1.300

11 months ago

1.1.420

11 months ago

1.1.409

11 months ago

1.1.408

11 months ago

1.1.407

11 months ago

1.1.406

11 months ago

1.1.416

11 months ago

1.1.415

11 months ago

1.1.414

11 months ago

1.1.413

11 months ago

1.1.412

11 months ago

1.1.411

11 months ago

1.1.410

11 months ago

1.1.319

11 months ago

1.1.439

11 months ago

1.1.318

11 months ago

1.1.441

11 months ago

1.1.320

11 months ago

1.1.440

11 months ago

1.1.449

11 months ago

1.1.328

11 months ago

1.1.448

11 months ago

1.1.327

11 months ago

1.1.447

11 months ago

1.1.326

11 months ago

1.1.446

11 months ago

1.1.325

11 months ago

1.1.445

11 months ago

1.1.324

11 months ago

1.1.444

11 months ago

1.1.323

11 months ago

1.1.443

11 months ago

1.1.322

11 months ago

1.1.442

11 months ago

1.1.321

11 months ago

1.1.309

11 months ago

1.1.429

11 months ago

1.1.308

11 months ago

1.1.428

11 months ago

1.1.307

11 months ago

1.1.430

11 months ago

1.1.438

11 months ago

1.1.317

11 months ago

1.1.437

11 months ago

1.1.316

11 months ago

1.1.436

11 months ago

1.1.315

11 months ago

1.1.435

11 months ago

1.1.314

11 months ago

1.1.434

11 months ago

1.1.313

11 months ago

1.1.433

11 months ago

1.1.312

11 months ago

1.1.432

11 months ago

1.1.311

11 months ago

1.1.431

11 months ago

1.1.310

11 months ago

1.1.290

11 months ago

1.1.298

11 months ago

1.1.297

11 months ago

1.1.296

11 months ago

1.1.295

11 months ago

1.1.294

11 months ago

1.1.293

11 months ago

1.1.292

11 months ago

1.1.291

11 months ago

1.1.299

11 months ago

1.1.386

11 months ago

1.1.265

11 months ago

1.1.385

11 months ago

1.1.264

11 months ago

1.1.384

11 months ago

1.1.263

11 months ago

1.1.383

11 months ago

1.1.262

11 months ago

1.1.382

11 months ago

1.1.261

11 months ago

1.1.381

11 months ago

1.1.260

11 months ago

1.1.380

11 months ago

1.1.269

11 months ago

1.1.389

11 months ago

1.1.268

11 months ago

1.1.388

11 months ago

1.1.267

11 months ago

1.1.387

11 months ago

1.1.266

11 months ago

1.1.375

11 months ago

1.1.254

11 months ago

1.1.374

11 months ago

1.1.253

11 months ago

1.1.373

11 months ago

1.1.252

11 months ago

1.1.372

11 months ago

1.1.251

11 months ago

1.1.371

11 months ago

1.1.250

11 months ago

1.1.370

11 months ago

1.1.259

11 months ago

1.1.379

11 months ago

1.1.258

11 months ago

1.1.378

11 months ago

1.1.257

11 months ago

1.1.377

11 months ago

1.1.256

11 months ago

1.1.376

11 months ago

1.1.255

11 months ago

1.1.287

11 months ago

1.1.286

11 months ago

1.1.285

11 months ago

1.1.284

11 months ago

1.1.283

11 months ago

1.1.282

11 months ago

1.1.281

11 months ago

1.1.280

11 months ago

1.1.289

11 months ago

1.1.288

11 months ago

1.1.397

11 months ago

1.1.276

11 months ago

1.1.396

11 months ago

1.1.275

11 months ago

1.1.395

11 months ago

1.1.274

11 months ago

1.1.394

11 months ago

1.1.273

11 months ago

1.1.393

11 months ago

1.1.272

11 months ago

1.1.392

11 months ago

1.1.271

11 months ago

1.1.391

11 months ago

1.1.270

11 months ago

1.1.390

11 months ago

1.1.279

11 months ago

1.1.399

11 months ago

1.1.278

11 months ago

1.1.398

11 months ago

1.1.277

11 months ago

1.2.0

11 months ago

1.1.405

11 months ago

1.1.404

11 months ago

1.1.403

11 months ago

1.1.402

11 months ago

1.1.401

11 months ago

1.1.400

11 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

1 year ago

1.0.25

1 year ago

1.0.24

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