JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Carousel 3D</title>
<style>
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
body {
background-color: #000020;
text-align: center;
}
</style>
</head>
<body>
<carousel-3d>
<style>
.logo {
height: 20vw;
width: 20vw;
max-width: 200px;
max-height: 200px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
contain: strict;
}
.logo:hover {
background-color: yellow;
cursor: pointer;
}
.logo > img {
width: 90%;
height: 90%;
padding: 10px;
background-color: navy;
border-radius: 10px;
}
#items-container {
animation: spin 10s infinite linear;
}
.anchor {
animation: counter-spin 10s infinite linear;
height: 100vh;
width: 100%;
background-image: url("https://static.vecteezy.com/system/resources/previews/019/806/316/original/lighthouse-graphic-clipart-design-free-png.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
@keyframes spin {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
@keyframes counter-spin {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(-360deg);
}
}
</style>
<div...
JavaScript
// index.js
import Carousel3D from "https://cdn.jsdelivr.net/npm/3d-carousel-js@latest/dist/index.module.js";
customElements.define("carousel-3d", Carousel3D);