Componente deslizante de carrusel 3D para cartera
Un componente deslizante de carrusel sensible inspirado en 3D para exhibir elementos de cartera, con colores complementarios y compatibilidad con el modo oscuro. Diseñado pensando en la profundidad y el compromiso.
Código HTML
<div class="overflow-hidden py-12 bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-white">
<div class="container mx-auto px-4">
<h2 class="text-4xl md:text-5xl font-extrabold text-center mb-12 relative z-10 text-transparent bg-clip-text bg-gradient-to-r from-teal-500 to-indigo-600 dark:from-teal-400 dark:to-indigo-500">
Our Showcase
</h2>
<div class="relative w-full aspect-video md:h-96 lg:h-[400px] xl:h-[500px] group perspective-1000px">
<!-- Hidden Checkbox for Navigation (simulated interactive effect) -->
<input type="radio" name="carousel-slide" id="slide-1" class="hidden" checked>
<input type="radio" name="carousel-slide" id="slide-2" class="hidden">
<input type="radio" name="carousel-slide" id="slide-3" class="hidden">
<input type="radio" name="carousel-slide" id="slide-4" class="hidden">
<div class="absolute w-full h-full ease-in-out duration-700 transform-style-preserve-3d relative-carousel-wrapper">
<!-- Slide 1 -->
<label for="slide-1" class="absolute w-4/5 md:w-3/5 lg:w-2/5 xl:w-1/3 h-full cursor-pointer transition-all duration-700 ease-in-out bg-gradient-to-br from-teal-400 to-blue-500 dark:from-teal-600 dark:to-blue-700 rounded-xl shadow-2xl overflow-hidden backface-hidden flex flex-col justify-between p-6 opacity-0 z-0 current-slide-transform">
<div class="absolute inset-0 bg-black bg-opacity-20 flex flex-col p-6 rounded-xl">
<img src="https://picsum.photos/id/1018/600/400" alt="Project 1" class="max-w-full h-48 md:h-56 lg:h-64 object-cover rounded-md shadow-lg mb-4 transform group-hover:scale-105 transition duration-300">
<h3 class="text-2xl md:text-3xl font-bold mb-2 text-white">Elegant Web Design</h3>
<p class="text-sm text-gray-100 mb-4">Crafting a seamless and intuitive user experience for a modern tech startup.</p>
<a href="#" class="mt-auto self-start px-5 py-2 bg-white text-teal-600 rounded-full font-semibold hover:bg-gray-100 dark:hover:bg-gray-200 transition duration-300 shadow-md">View Project</a>
</div>
</label>
<!-- Slide 2 -->
<label for="slide-2" class="absolute w-4/5 md:w-3/5 lg:w-2/5 xl:w-1/3 h-full cursor-pointer transition-all duration-700 ease-in-out bg-gradient-to-br from-indigo-500 to-purple-600 dark:from-indigo-700 dark:to-purple-800 rounded-xl shadow-2xl overflow-hidden backface-hidden flex flex-col justify-between p-6 opacity-0 z-0 right-slide-transform">
<div class="absolute inset-0 bg-black bg-opacity-20 flex flex-col p-6 rounded-xl">
<img src="https://picsum.photos/id/1015/600/400" alt="Project 2" class="max-w-full h-48 md:h-56 lg:h-64 object-cover rounded-md shadow-lg mb-4 transform group-hover:scale-105 transition duration-300">
<h3 class="text-2xl md:text-3xl font-bold mb-2 text-white">Mobile App Development</h3>
<p class="text-sm text-gray-100 mb-4">Building a cross-platform mobile application with robust features and engaging UI.</p>
<a href="#" class="mt-auto self-start px-5 py-2 bg-white text-indigo-700 rounded-full font-semibold hover:bg-gray-100 dark:hover:bg-gray-200 transition duration-300 shadow-md">View Project</a>
</div>
</label>
<!-- Slide 3 -->
<label for="slide-3" class="absolute w-4/5 md:w-3/5 lg:w-2/5 xl:w-1/3 h-full cursor-pointer transition-all duration-700 ease-in-out bg-gradient-to-br from-purple-500 to-red-600 dark:from-purple-700 dark:to-red-800 rounded-xl shadow-2xl overflow-hidden backface-hidden flex flex-col justify-between p-6 opacity-0 z-0 far-right-slide-transform">
<div class="absolute inset-0 bg-black bg-opacity-20 flex flex-col p-6 rounded-xl">
<img src="https://picsum.photos/id/1004/600/400" alt="Project 3" class="max-w-full h-48 md:h-56 lg:h-64 object-cover rounded-md shadow-lg mb-4 transform group-hover:scale-105 transition duration-300">
<h3 class="text-2xl md:text-3xl font-bold mb-2 text-white">Brand Identity Design</h3>
<p class="text-sm text-gray-100 mb-4">Developing a comprehensive brand identity including logo, typography, and guidelines.</p>
<a href="#" class="mt-auto self-start px-5 py-2 bg-white text-purple-700 rounded-full font-semibold hover:bg-gray-100 dark:hover:bg-gray-200 transition duration-300 shadow-md">View Project</a>
</div>
</label>
<!-- Slide 4 -->
<label for="slide-4" class="absolute w-4/5 md:w-3/5 lg:w-2/5 xl:w-1/3 h-full cursor-pointer transition-all duration-700 ease-in-out bg-gradient-to-br from-red-500 to-orange-600 dark:from-red-700 dark:to-orange-800 rounded-xl shadow-2xl overflow-hidden backface-hidden flex flex-col justify-between p-6 opacity-0 z-0 left-slide-transform">
<div class="absolute inset-0 bg-black bg-opacity-20 flex flex-col p-6 rounded-xl">
<img src="https://picsum.photos/id/1003/600/400" alt="Project 4" class="max-w-full h-48 md:h-56 lg:h-64 object-cover rounded-md shadow-lg mb-4 transform group-hover:scale-105 transition duration-300">
<h3 class="text-2xl md:text-3xl font-bold mb-2 text-white">E-commerce Platform</h3>
<p class="text-sm text-gray-100 mb-4">Building a high-performance e-commerce solution with integrated payment gateways.</p>
<a href="#" class="mt-auto self-start px-5 py-2 bg-white text-red-700 rounded-full font-semibold hover:bg-gray-100 dark:hover:bg-gray-200 transition duration-300 shadow-md">View Project</a>
</div>
</label>
</div>
<!-- Navigation Dots -->
<div class="absolute bottom-0 md:bottom-[-2.5rem] lg:bottom-[-3rem] left-1/2 -translate-x-1/2 flex space-x-3 pointer-events-none z-20">
<label for="slide-1" class="w-3 h-3 md:w-3.5 md:h-3.5 bg-gray-400 dark:bg-gray-600 rounded-full cursor-pointer transition-all duration-300 hover:scale-110 active:bg-gradient-to-r from-teal-500 to-blue-500 dark:active:from-teal-400 dark:active:to-blue-500 dot-1-active"></label>
<label for="slide-2" class="w-3 h-3 md:w-3.5 md:h-3.5 bg-gray-400 dark:bg-gray-600 rounded-full cursor-pointer transition-all duration-300 hover:scale-110 active:bg-gradient-to-r from-teal-500 to-blue-500 dark:active:from-teal-400 dark:active:to-blue-500 dot-2-active"></label>
<label for="slide-3" class="w-3 h-3 md:w-3.5 md:h-3.5 bg-gray-400 dark:bg-gray-600 rounded-full cursor-pointer transition-all duration-300 hover:scale-110 active:bg-gradient-to-r from-teal-500 to-blue-500 dark:active:from-teal-400 dark:active:to-blue-500 dot-3-active"></label>
<label for="slide-4" class="w-3 h-3 md:w-3.5 md:h-3.5 bg-gray-400 dark:bg-gray-600 rounded-full cursor-pointer transition-all duration-300 hover:scale-110 active:bg-gradient-to-r from-teal-500 to-blue-500 dark:active:from-teal-400 dark:active:to-blue-500 dot-4-active"></label>
</div>
</div>
</div>
</div>
<style>
/* Base styles for 3D carousel container */
.perspective-1000px {
perspective: 1000px;
}
.transform-style-preserve-3d {
transform-style: preserve-3d;
}
.backface-hidden {
backface-visibility: hidden;
}
/* General slide positioning for animation */
.relative-carousel-wrapper label {
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotateY(0deg) translateX(0) scale(0.8) translateY(0);
opacity: 0;
}
/* Define transformations for each slide based on checked state */
#slide-1:checked ~ .relative-carousel-wrapper .current-slide-transform,
#slide-2:checked ~ .relative-carousel-wrapper .right-slide-transform,
#slide-3:checked ~ .relative-carousel-wrapper .far-right-slide-transform,
#slide-4:checked ~ .relative-carousel-wrapper .left-slide-transform {
transform: translate(-50%, -50%) rotateY(0deg) translateX(0) scale(1) translateY(0);
opacity: 1;
z-index: 10;
}
/* Right slide */
#slide-1:checked ~ .relative-carousel-wrapper .right-slide-transform,
#slide-2:checked ~ .relative-carousel-wrapper .far-right-slide-transform,
#slide-3:checked ~ .relative-carousel-wrapper .left-slide-transform,
#slide-4:checked ~ .relative-carousel-wrapper .current-slide-transform {
transform: translate(-50%, -50%) rotateY(-20deg) translateX(calc(100% + 4rem)) scale(0.8) translateY(0);
opacity: 0.7;
z-index: 5;
pointer-events: auto; /* Make visible side slides clickable */
}
/* Far right slide */
#slide-1:checked ~ .relative-carousel-wrapper .far-right-slide-transform,
#slide-2:checked ~ .relative-carousel-wrapper .left-slide-transform,
#slide-3:checked ~ .relative-carousel-wrapper .current-slide-transform,
#slide-4:checked ~ .relative-carousel-wrapper .right-slide-transform {
transform: translate(-50%, -50%) rotateY(-40deg) translateX(calc(200% + 8rem)) scale(0.6) translateY(0);
opacity: 0.4;
z-index: 0;
pointer-events: auto;
}
/* Left slide */
#slide-1:checked ~ .relative-carousel-wrapper .left-slide-transform,
#slide-2:checked ~ .relative-carousel-wrapper .current-slide-transform,
#slide-3:checked ~ .relative-carousel-wrapper .right-slide-transform,
#slide-4:checked ~ .relative-carousel-wrapper .far-right-slide-transform {
transform: translate(-50%, -50%) rotateY(20deg) translateX(calc(-100% - 4rem)) scale(0.8) translateY(0);
opacity: 0.7;
z-index: 5;
pointer-events: auto;
}
/* Navigation dot active states */
#slide-1:checked ~ .navigation .dot-1-active,
#slide-2:checked ~ .navigation .dot-2-active,
#slide-3:checked ~ .navigation .dot-3-active,
#slide-4:checked ~ .navigation .dot-4-active {
background-color: #6366f1; /* Tailwind indigo-500 */
transform: scale(1.4);
}
/* Update navigation dot colors on checked state */
#slide-1:checked ~ div.navigation-dots label[for='slide-1'],
#slide-2:checked ~ div.navigation-dots label[for='slide-2'],
#slide-3:checked ~ div.navigation-dots label[for='slide-3'],
#slide-4:checked ~ div.navigation-dots label[for='slide-4'] {
background-color: #3b82f6; /* A shade of blue for active dot */
transform: scale(1.4);
background-image: linear-gradient(to right, var(--tw-gradient-stops));
--tw-gradient-from: #14b8a6; /* teal-500 */
--tw-gradient-to: #3b82f6; /* blue-500 */
}
@media (prefers-color-scheme: dark) {
#slide-1:checked ~ div.navigation-dots label[for='slide-1'],
#slide-2:checked ~ div.navigation-dots label[for='slide-2'],
#slide-3:checked ~ div.navigation-dots label[for='slide-3'],
#slide-4:checked ~ div.navigation-dots label[for='slide-4'] {
--tw-gradient-from: #2dd4bf; /* teal-400 */
--tw-gradient-to: #60a5fa; /* blue-400 */
}
}
/* Define the order of slides logic for the carousel */
/* When slide-1 is checked: */
#slide-1:checked ~ .relative-carousel-wrapper > label:nth-child(1) { /* Current */
transform: translate(-50%, -50%) rotateY(0deg) translateX(0) scale(1) translateY(0);
opacity: 1;
z-index: 10;
pointer-events: none; /* Disable click on current slide */
}
#slide-1:checked ~ .relative-carousel-wrapper > label:nth-child(2) { /* Right */
transform: translate(-50%, -50%) rotateY(-20deg) translateX(calc(100% + 4rem)) scale(0.8) translateY(0);
opacity: 0.7;
z-index: 5;
}
#slide-1:checked ~ .relative-carousel-wrapper > label:nth-child(3) { /* Far Right */
transform: translate(-50%, -50%) rotateY(-40deg) translateX(calc(200% + 8rem)) scale(0.6) translateY(0);
opacity: 0.4;
z-index: 0;
}
#slide-1:checked ~ .relative-carousel-wrapper > label:nth-child(4) { /* Left */
transform: translate(-50%, -50%) rotateY(20deg) translateX(calc(-100% - 4rem)) scale(0.8) translateY(0);
opacity: 0.7;
z-index: 5;
}
/* When slide-2 is checked: */
#slide-2:checked ~ .relative-carousel-wrapper > label:nth-child(2) { /* Current */
transform: translate(-50%, -50%) rotateY(0deg) translateX(0) scale(1) translateY(0);
opacity: 1;
z-index: 10;
pointer-events: none;
}
#slide-2:checked ~ .relative-carousel-wrapper > label:nth-child(3) { /* Right */
transform: translate(-50%, -50%) rotateY(-20deg) translateX(calc(100% + 4rem)) scale(0.8) translateY(0);
opacity: 0.7;
z-index: 5;
}
#slide-2:checked ~ .relative-carousel-wrapper > label:nth-child(4) { /* Far Right (now previous left) */
transform: translate(-50%, -50%) rotateY(-40deg) translateX(calc(200% + 8rem)) scale(0.6) translateY(0);
opacity: 0.4;
z-index: 0;
}
#slide-2:checked ~ .relative-carousel-wrapper > label:nth-child(1) { /* Left (now previous current) */
transform: translate(-50%, -50%) rotateY(20deg) translateX(calc(-100% - 4rem)) scale(0.8) translateY(0);
opacity: 0.7;
z-index: 5;
}
/* When slide-3 is checked: */
#slide-3:checked ~ .relative-carousel-wrapper > label:nth-child(3) { /* Current */
transform: translate(-50%, -50%) rotateY(0deg) translateX(0) scale(1) translateY(0);
opacity: 1;
z-index: 10;
pointer-events: none;
}
#slide-3:checked ~ .relative-carousel-wrapper > label:nth-child(4) { /* Right */
transform: translate(-50%, -50%) rotateY(-20deg) translateX(calc(100% + 4rem)) scale(0.8) translateY(0);
opacity: 0.7;
z-index: 5;
}
#slide-3:checked ~ .relative-carousel-wrapper > label:nth-child(1) { /* Far Right (was left) */
transform: translate(-50%, -50%) rotateY(-40deg) translateX(calc(200% + 8rem)) scale(0.6) translateY(0);
opacity: 0.4;
z-index: 0;
}
#slide-3:checked ~ .relative-carousel-wrapper > label:nth-child(2) { /* Left (was current) */
transform: translate(-50%, -50%) rotateY(20deg) translateX(calc(-100% - 4rem)) scale(0.8) translateY(0);
opacity: 0.7;
z-index: 5;
}
/* When slide-4 is checked: */
#slide-4:checked ~ .relative-carousel-wrapper > label:nth-child(4) { /* Current */
transform: translate(-50%, -50%) rotateY(0deg) translateX(0) scale(1) translateY(0);
opacity: 1;
z-index: 10;
pointer-events: none;
}
#slide-4:checked ~ .relative-carousel-wrapper > label:nth-child(1) { /* Right */
transform: translate(-50%, -50%) rotateY(-20deg) translateX(calc(100% + 4rem)) scale(0.8) translateY(0);
opacity: 0.7;
z-index: 5;
}
#slide-4:checked ~ .relative-carousel-wrapper > label:nth-child(2) { /* Far Right */
transform: translate(-50%, -50%) rotateY(-40deg) translateX(calc(200% + 8rem)) scale(0.6) translateY(0);
opacity: 0.4;
z-index: 0;
}
#slide-4:checked ~ .relative-carousel-wrapper > label:nth-child(3) { /* Left */
transform: translate(-50%, -50%) rotateY(20deg) translateX(calc(-100% - 4rem)) scale(0.8) translateY(0);
opacity: 0.7;
z-index: 5;
}
/* Navigation dot active styling for actual dots */
div.navigation-dots label {
pointer-events: auto; /* Make dots clickable */
}
#slide-1:checked ~ .navigation-dots label[for='slide-1'],
#slide-2:checked ~ .navigation-dots label[for='slide-2'],
#slide-3:checked ~ .navigation-dots label[for='slide-3'],
#slide-4:checked ~ .navigation-dots label[for='slide-4'] {
background-color: #3b82f6; /* Tailwind blue-500 */
transform: scale(1.4);
}
/* Specific styling for the actual dots container */
.navigation-dots {
position: absolute;
bottom: 1rem; /* Adjust as needed */
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 0.75rem;
z-index: 20;
}
/* Mobile Responsiveness for translateX amounts */
@media (max-width: 767px) { /* Adjust for smaller mobile screens */
#slide-1:checked ~ .relative-carousel-wrapper > label:nth-child(2) { /* Right */
transform: translate(-50%, -50%) rotateY(-20deg) translateX(calc(80% + 2rem)) scale(0.7) translateY(0);
}
#slide-1:checked ~ .relative-carousel-wrapper > label:nth-child(3) { /* Far Right */
transform: translate(-50%, -50%) rotateY(-40deg) translateX(calc(160% + 4rem)) scale(0.5) translateY(0);
opacity: 0.3;
}
#slide-1:checked ~ .relative-carousel-wrapper > label:nth-child(4) { /* Left */
transform: translate(-50%, -50%) rotateY(20deg) translateX(calc(-80% - 2rem)) scale(0.7) translateY(0);
}
/* Apply similar adjustments for other checked states if needed */
#slide-2:checked ~ .relative-carousel-wrapper > label:nth-child(3) {
transform: translate(-50%, -50%) rotateY(-20deg) translateX(calc(80% + 2rem)) scale(0.7) translateY(0);
}
#slide-2:checked ~ .relative-carousel-wrapper > label:nth-child(4) {
transform: translate(-50%, -50%) rotateY(-40deg) translateX(calc(160% + 4rem)) scale(0.5) translateY(0);
opacity: 0.3;
}
#slide-2:checked ~ .relative-carousel-wrapper > label:nth-child(1) {
transform: translate(-50%, -50%) rotateY(20deg) translateX(calc(-80% - 2rem)) scale(0.7) translateY(0);
}
#slide-3:checked ~ .relative-carousel-wrapper > label:nth-child(4) {
transform: translate(-50%, -50%) rotateY(-20deg) translateX(calc(80% + 2rem)) scale(0.7) translateY(0);
}
#slide-3:checked ~ .relative-carousel-wrapper > label:nth-child(1) {
transform: translate(-50%, -50%) rotateY(-40deg) translateX(calc(160% + 4rem)) scale(0.5) translateY(0);
opacity: 0.3;
}
#slide-3:checked ~ .relative-carousel-wrapper > label:nth-child(2) {
transform: translate(-50%, -50%) rotateY(20deg) translateX(calc(-80% - 2rem)) scale(0.7) translateY(0);
}
#slide-4:checked ~ .relative-carousel-wrapper > label:nth-child(1) {
transform: translate(-50%, -50%) rotateY(-20deg) translateX(calc(80% + 2rem)) scale(0.7) translateY(0);
}
#slide-4:checked ~ .relative-carousel-wrapper > label:nth-child(2) {
transform: translate(-50%, -50%) rotateY(-40deg) translateX(calc(160% + 4rem)) scale(0.5) translateY(0);
opacity: 0.3;
}
#slide-4:checked ~ .relative-carousel-wrapper > label:nth-child(3) {
transform: translate(-50%, -50%) rotateY(20deg) translateX(calc(-80% - 2rem)) scale(0.7) translateY(0);
}
/* Adjust slide width for extra small screens if needed */
.relative-carousel-wrapper label {
width: 90%; /* Make slides wider on small screens */
}
}
@media (min-width: 768px) and (max-width: 1023px) { /* Tablet adjustments */
.relative-carousel-wrapper label {
width: 60%; /* Adjust width for tablets */
}
}
/* New for the "navigation-dots" to contain dots */
.group-perspective-1000px input:checked + .relative-carousel-wrapper + .navigation-dots > label {
background-color: #9ca3af; /* Default gray for dots */
}
.group-perspective-1000px input#slide-1:checked + .relative-carousel-wrapper + .navigation-dots > label[for='slide-1'],
.group-perspective-1000px input#slide-2:checked + .relative-carousel-wrapper + .navigation-dots > label[for='slide-2'],
.group-perspective-1000px input#slide-3:checked + .relative-carousel-wrapper + .navigation-dots > label[for='slide-3'],
.group-perspective-1000px input#slide-4:checked + .relative-carousel-wrapper + .navigation-dots > label[for='slide-4'] {
background-image: linear-gradient(to right, var(--tw-gradient-from), var(--tw-gradient-to));
--tw-gradient-from: #14b8a6; /* teal-500 */
--tw-gradient-to: #3b82f6; /* blue-500 */
transform: scale(1.4);
}
@media (prefers-color-scheme: dark) {
.group-perspective-1000px input:checked + .relative-carousel-wrapper + .navigation-dots > label {
background-color: #4b5563; /* Dark gray for dots */
}
.group-perspective-1000px input#slide-1:checked + .relative-carousel-wrapper + .navigation-dots > label[for='slide-1'],
.group-perspective-1000px input#slide-2:checked + .relative-carousel-wrapper + .navigation-dots > label[for='slide-2'],
.group-perspective-1000px input#slide-3:checked + .relative-carousel-wrapper + .navigation-dots > label[for='slide-3'],
.group-perspective-1000px input#slide-4:checked + .relative-carousel-wrapper + .navigation-dots > label[for='slide-4'] {
--tw-gradient-from: #2dd4bf; /* dark teal-400 */
--tw-gradient-to: #60a5fa; /* dark blue-400 */
}
}
</style>Componentes relacionados
Deslizador de carrusel de neumorfismo
Componente de deslizador de carrusel receptivo con estilo de neumorfismo, combinación de colores pastel, complejidad moderada, propósito de redes sociales y soporte de tema oscuro mediante Tailwind CSS.
Componente deslizante de carrusel de glassmorphism
Componente de control deslizante de carrusel con diseño de morfismo de vidrio y soporte de modo oscuro.
Componente Deslizador de carrusel
Un componente deslizante de carrusel minimalista diseñado para blogs y consumo de contenido, con un esquema de color triádico y un diseño receptivo con soporte para temas oscuros.