1.2.0 • Published 1 year ago

cube-3d-js v1.2.0

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year 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

1 year ago

1.1.463

1 year ago

1.1.342

1 year ago

1.1.221

1 year ago

1.1.462

1 year ago

1.1.341

1 year ago

1.1.220

1 year ago

1.1.461

1 year ago

1.1.340

1 year ago

1.1.460

1 year ago

1.1.229

1 year ago

1.1.349

1 year ago

1.1.228

1 year ago

1.1.469

1 year ago

1.1.348

1 year ago

1.1.227

1 year ago

1.1.468

1 year ago

1.1.347

1 year ago

1.1.226

1 year ago

1.1.467

1 year ago

1.1.346

1 year ago

1.1.225

1 year ago

1.1.466

1 year ago

1.1.345

1 year ago

1.1.224

1 year ago

1.1.465

1 year ago

1.1.344

1 year ago

1.1.223

1 year ago

1.1.464

1 year ago

1.1.343

1 year ago

1.1.222

1 year ago

1.1.329

1 year ago

1.1.452

1 year ago

1.1.331

1 year ago

1.1.451

1 year ago

1.1.330

1 year ago

1.1.450

1 year ago

1.1.339

1 year ago

1.1.218

1 year ago

1.1.459

1 year ago

1.1.338

1 year ago

1.1.217

1 year ago

1.1.458

1 year ago

1.1.337

1 year ago

1.1.216

1 year ago

1.1.457

1 year ago

1.1.336

1 year ago

1.1.456

1 year ago

1.1.335

1 year ago

1.1.455

1 year ago

1.1.334

1 year ago

1.1.454

1 year ago

1.1.333

1 year ago

1.1.453

1 year ago

1.1.332

1 year ago

1.1.364

1 year ago

1.1.243

1 year ago

1.1.363

1 year ago

1.1.242

1 year ago

1.1.362

1 year ago

1.1.241

1 year ago

1.1.361

1 year ago

1.1.240

1 year ago

1.1.360

1 year ago

1.1.249

1 year ago

1.1.369

1 year ago

1.1.248

1 year ago

1.1.368

1 year ago

1.1.247

1 year ago

1.1.367

1 year ago

1.1.246

1 year ago

1.1.366

1 year ago

1.1.245

1 year ago

1.1.365

1 year ago

1.1.244

1 year ago

1.1.474

1 year ago

1.1.353

1 year ago

1.1.232

1 year ago

1.1.473

1 year ago

1.1.352

1 year ago

1.1.231

1 year ago

1.1.472

1 year ago

1.1.351

1 year ago

1.1.230

1 year ago

1.1.471

1 year ago

1.1.350

1 year ago

1.1.470

1 year ago

1.1.239

1 year ago

1.1.359

1 year ago

1.1.238

1 year ago

1.1.358

1 year ago

1.1.237

1 year ago

1.1.357

1 year ago

1.1.236

1 year ago

1.1.356

1 year ago

1.1.235

1 year ago

1.1.355

1 year ago

1.1.234

1 year ago

1.1.354

1 year ago

1.1.233

1 year ago

1.1.419

1 year ago

1.1.418

1 year ago

1.1.417

1 year ago

1.1.427

1 year ago

1.1.306

1 year ago

1.1.426

1 year ago

1.1.305

1 year ago

1.1.425

1 year ago

1.1.304

1 year ago

1.1.424

1 year ago

1.1.303

1 year ago

1.1.423

1 year ago

1.1.302

1 year ago

1.1.422

1 year ago

1.1.301

1 year ago

1.1.421

1 year ago

1.1.300

1 year ago

1.1.420

1 year ago

1.1.409

1 year ago

1.1.408

1 year ago

1.1.407

1 year ago

1.1.406

1 year ago

1.1.416

1 year ago

1.1.415

1 year ago

1.1.414

1 year ago

1.1.413

1 year ago

1.1.412

1 year ago

1.1.411

1 year ago

1.1.410

1 year ago

1.1.319

1 year ago

1.1.439

1 year ago

1.1.318

1 year ago

1.1.441

1 year ago

1.1.320

1 year ago

1.1.440

1 year ago

1.1.449

1 year ago

1.1.328

1 year ago

1.1.448

1 year ago

1.1.327

1 year ago

1.1.447

1 year ago

1.1.326

1 year ago

1.1.446

1 year ago

1.1.325

1 year ago

1.1.445

1 year ago

1.1.324

1 year ago

1.1.444

1 year ago

1.1.323

1 year ago

1.1.443

1 year ago

1.1.322

1 year ago

1.1.442

1 year ago

1.1.321

1 year ago

1.1.309

1 year ago

1.1.429

1 year ago

1.1.308

1 year ago

1.1.428

1 year ago

1.1.307

1 year ago

1.1.430

1 year ago

1.1.438

1 year ago

1.1.317

1 year ago

1.1.437

1 year ago

1.1.316

1 year ago

1.1.436

1 year ago

1.1.315

1 year ago

1.1.435

1 year ago

1.1.314

1 year ago

1.1.434

1 year ago

1.1.313

1 year ago

1.1.433

1 year ago

1.1.312

1 year ago

1.1.432

1 year ago

1.1.311

1 year ago

1.1.431

1 year ago

1.1.310

1 year ago

1.1.290

1 year ago

1.1.298

1 year ago

1.1.297

1 year ago

1.1.296

1 year ago

1.1.295

1 year ago

1.1.294

1 year ago

1.1.293

1 year ago

1.1.292

1 year ago

1.1.291

1 year ago

1.1.299

1 year ago

1.1.386

1 year ago

1.1.265

1 year ago

1.1.385

1 year ago

1.1.264

1 year ago

1.1.384

1 year ago

1.1.263

1 year ago

1.1.383

1 year ago

1.1.262

1 year ago

1.1.382

1 year ago

1.1.261

1 year ago

1.1.381

1 year ago

1.1.260

1 year ago

1.1.380

1 year ago

1.1.269

1 year ago

1.1.389

1 year ago

1.1.268

1 year ago

1.1.388

1 year ago

1.1.267

1 year ago

1.1.387

1 year ago

1.1.266

1 year ago

1.1.375

1 year ago

1.1.254

1 year ago

1.1.374

1 year ago

1.1.253

1 year ago

1.1.373

1 year ago

1.1.252

1 year ago

1.1.372

1 year ago

1.1.251

1 year ago

1.1.371

1 year ago

1.1.250

1 year ago

1.1.370

1 year ago

1.1.259

1 year ago

1.1.379

1 year ago

1.1.258

1 year ago

1.1.378

1 year ago

1.1.257

1 year ago

1.1.377

1 year ago

1.1.256

1 year ago

1.1.376

1 year ago

1.1.255

1 year ago

1.1.287

1 year ago

1.1.286

1 year ago

1.1.285

1 year ago

1.1.284

1 year ago

1.1.283

1 year ago

1.1.282

1 year ago

1.1.281

1 year ago

1.1.280

1 year ago

1.1.289

1 year ago

1.1.288

1 year ago

1.1.397

1 year ago

1.1.276

1 year ago

1.1.396

1 year ago

1.1.275

1 year ago

1.1.395

1 year ago

1.1.274

1 year ago

1.1.394

1 year ago

1.1.273

1 year ago

1.1.393

1 year ago

1.1.272

1 year ago

1.1.392

1 year ago

1.1.271

1 year ago

1.1.391

1 year ago

1.1.270

1 year ago

1.1.390

1 year ago

1.1.279

1 year ago

1.1.399

1 year ago

1.1.278

1 year ago

1.1.398

1 year ago

1.1.277

1 year ago

1.2.0

1 year ago

1.1.405

1 year ago

1.1.404

1 year ago

1.1.403

1 year ago

1.1.402

1 year ago

1.1.401

1 year ago

1.1.400

1 year ago

1.1.100

2 years ago

1.1.108

2 years ago

1.1.107

2 years ago

1.1.106

2 years ago

1.1.105

2 years ago

1.1.104

2 years ago

1.1.103

2 years ago

1.1.102

2 years ago

1.1.101

2 years ago

1.1.209

2 years ago

1.1.208

2 years ago

1.1.210

2 years ago

1.1.215

2 years ago

1.1.214

2 years ago

1.1.213

2 years ago

1.1.212

2 years ago

1.1.211

2 years ago

1.1.122

2 years ago

1.1.92

2 years ago

1.1.121

2 years ago

1.1.91

2 years ago

1.1.120

2 years ago

1.1.90

2 years ago

1.1.96

2 years ago

1.1.95

2 years ago

1.1.94

2 years ago

1.1.93

2 years ago

1.1.129

2 years ago

1.1.99

2 years ago

1.1.128

2 years ago

1.1.98

2 years ago

1.1.127

2 years ago

1.1.97

2 years ago

1.1.126

2 years ago

1.1.125

2 years ago

1.1.124

2 years ago

1.1.123

2 years ago

1.1.109

2 years ago

1.1.111

2 years ago

1.1.110

2 years ago

1.1.119

2 years ago

1.1.118

2 years ago

1.1.117

2 years ago

1.1.116

2 years ago

1.1.115

2 years ago

1.1.114

2 years ago

1.1.113

2 years ago

1.1.112

2 years ago

1.1.70

2 years ago

1.1.74

2 years ago

1.1.73

2 years ago

1.1.72

2 years ago

1.1.71

2 years ago

1.1.78

2 years ago

1.1.77

2 years ago

1.1.76

2 years ago

1.1.75

2 years ago

1.1.79

2 years ago

1.1.81

2 years ago

1.1.80

2 years ago

1.1.85

2 years ago

1.1.84

2 years ago

1.1.83

2 years ago

1.1.82

2 years ago

1.1.89

2 years ago

1.1.88

2 years ago

1.1.87

2 years ago

1.1.86

2 years ago

1.1.52

2 years ago

1.1.51

2 years ago

1.1.50

2 years ago

1.1.207

2 years ago

1.1.56

2 years ago

1.1.206

2 years ago

1.1.55

2 years ago

1.1.205

2 years ago

1.1.54

2 years ago

1.1.204

2 years ago

1.1.53

2 years ago

1.1.203

2 years ago

1.1.202

2 years ago

1.1.59

2 years ago

1.1.201

2 years ago

1.1.58

2 years ago

1.1.200

2 years ago

1.1.57

2 years ago

1.1.63

2 years ago

1.1.62

2 years ago

1.1.61

2 years ago

1.1.60

2 years ago

1.1.67

2 years ago

1.1.66

2 years ago

1.1.65

2 years ago

1.1.64

2 years ago

1.1.69

2 years ago

1.1.68

2 years ago

1.1.29

2 years ago

1.1.28

2 years ago

1.1.180

2 years ago

1.1.188

2 years ago

1.1.187

2 years ago

1.1.186

2 years ago

1.1.185

2 years ago

1.1.184

2 years ago

1.1.30

2 years ago

1.1.183

2 years ago

1.1.182

2 years ago

1.1.181

2 years ago

1.1.34

2 years ago

1.1.33

2 years ago

1.1.32

2 years ago

1.1.31

2 years ago

1.1.38

2 years ago

1.1.37

2 years ago

1.1.36

2 years ago

1.1.189

2 years ago

1.1.35

2 years ago

1.1.39

2 years ago

1.1.177

2 years ago

1.1.176

2 years ago

1.1.175

2 years ago

1.1.174

2 years ago

1.1.173

2 years ago

1.1.41

2 years ago

1.1.172

2 years ago

1.1.40

2 years ago

1.1.171

2 years ago

1.1.170

2 years ago

1.1.45

2 years ago

1.1.44

2 years ago

1.1.43

2 years ago

1.1.42

2 years ago

1.1.49

2 years ago

1.1.48

2 years ago

1.1.179

2 years ago

1.1.47

2 years ago

1.1.178

2 years ago

1.1.46

2 years ago

1.1.9

2 years ago

1.1.8

2 years ago

1.1.7

2 years ago

1.1.6

2 years ago

1.1.5

2 years ago

1.1.4

2 years ago

1.1.3

2 years ago

1.1.12

2 years ago

1.1.11

2 years ago

1.1.10

2 years ago

1.1.16

2 years ago

1.1.15

2 years ago

1.1.14

2 years ago

1.1.13

2 years ago

1.1.19

2 years ago

1.1.18

2 years ago

1.1.17

2 years ago

1.1.191

2 years ago

1.1.190

2 years ago

1.1.199

2 years ago

1.1.198

2 years ago

1.1.197

2 years ago

1.1.196

2 years ago

1.1.195

2 years ago

1.1.194

2 years ago

1.1.193

2 years ago

1.1.192

2 years ago

1.1.23

2 years ago

1.1.22

2 years ago

1.1.21

2 years ago

1.1.20

2 years ago

1.1.27

2 years ago

1.1.26

2 years ago

1.1.25

2 years ago

1.1.24

2 years ago

1.1.144

2 years ago

1.1.143

2 years ago

1.1.142

2 years ago

1.1.141

2 years ago

1.1.140

2 years ago

1.1.149

2 years ago

1.1.148

2 years ago

1.1.147

2 years ago

1.1.146

2 years ago

1.1.145

2 years ago

1.1.133

2 years ago

1.1.132

2 years ago

1.1.131

2 years ago

1.1.130

2 years ago

1.1.139

2 years ago

1.1.138

2 years ago

1.1.137

2 years ago

1.1.136

2 years ago

1.1.135

2 years ago

1.1.134

2 years ago

1.1.166

2 years ago

1.1.165

2 years ago

1.1.164

2 years ago

1.1.163

2 years ago

1.1.162

2 years ago

1.1.161

2 years ago

1.1.160

2 years ago

1.1.169

2 years ago

1.1.168

2 years ago

1.1.167

2 years ago

1.1.155

2 years ago

1.1.154

2 years ago

1.1.153

2 years ago

1.1.152

2 years ago

1.1.151

2 years ago

1.1.150

2 years ago

1.1.159

2 years ago

1.1.158

2 years ago

1.1.157

2 years ago

1.1.156

2 years ago

1.1.2

2 years ago

1.1.1

2 years ago

1.1.0

2 years ago

1.0.36

2 years ago

1.0.35

2 years ago

1.0.33

2 years ago

1.0.32

2 years ago

1.0.29

2 years ago

1.0.28

2 years ago

1.0.27

2 years ago

1.0.31

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