Home
Omer fils ELENGA
Perspective 3D

Perspective 3D

This tailwind example is contributed by Omer fils ELENGA, on 27-Nov-2025. Component is made with Tailwind CSS v3. It is responsive.

Hero

Author Omer fils ELENGA

Fork Fullscreen

<!DOCTYPE html>
<html lang="en" class="dark">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  <meta name="theme-color" content="#000000"/>
  <title>iOS 26 Slider — 3D Perspective</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          fontFamily: {
            sans: ['-apple-system', 'BlinkMacSystemFont', 'SF Pro Display', 'Inter', 'sans-serif']
          },
          colors: {
            'ios-bg': '#111111',
            'ios-card': 'rgba(255, 255, 255, 0.08)',
            'ios-border': 'rgba(255, 255, 255, 0.15)'
          }
        }
      }
    }
  </script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
    }

body {
      background: #000;
      color: white;
      min-height: 100vh;
      overflow: hidden;
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
      touch-action: pan-y;
    }

/* Fond animé iOS 26 */
    #three-canvas {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }

/* Slider container */
    .ios-slider {
      position: relative;
      height: 100vh;
      overflow: hidden;
      perspective: 1000px;
      perspective-origin: 50% 50%;
    }

/* Slides */
    .slide {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 2rem;
      transform-style: preserve-3d;
      transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
                  opacity 0.5s ease;
      opacity: 0;
      pointer-events: none;
    }

.slide.active {
      opacity: 1;
      pointer-events: auto;
      transform: translateZ(0) rotateX(0) rotateY(0);
    }

.slide.prev {
      transform: translateX(-100%) rotateY(-15deg);
      opacity: 0.6;
    }

.slide.next {
      transform: translateX(100%) rotateY(15deg);
      opacity: 0.6;
    }

/* Card iOS 26 */
    .ios-card {
      background: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(40px);
      -webkit-backdrop-filter: blur(40px);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 32px;
      width: 90%;
      max-width: 360px;
      padding: 2.5rem 2rem;
      text-align: center;
      transform-style: preserve-3d;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    }

.ios-card:hover {
      transform: translateZ(20px) rotateX(2deg) rotateY(2deg);
      box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
    }

/* Typography iOS */
    .slide-title {
      font-size: 2.2rem;
      font-weight: 600;
      line-height: 1.2;
      background: linear-gradient(135deg, #a855f7, #ec4899);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      margin-bottom: 1.5rem;
    }

.slide-text {
      font-size: 1.1rem;
      color: rgba(255, 255, 255, 0.85);
      line-height: 1.6;
      margin-bottom: 2rem;
      max-width: 300px;
    }

/* Pagination */
    .slider-pagination {
      position: absolute;
      bottom: 2rem;
      left: 0;
      right: 0;
      display: flex;
      justify-content: center;
      gap: 0.75rem;
      z-index: 10;
    }

.pagination-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.3);
      transition: all 0.3s ease;
    }

.pagination-dot.active {
      background: white;
      transform: scale(1.4);
    }

/* Instruction */
    .instruction {
      position: absolute;
      bottom: 1rem;
      left: 0;
      right: 0;
      text-align: center;
      color: rgba(255, 255, 255, 0.7);
      font-size: 0.85rem;
      opacity: 0;
      transition: opacity 0.5s ease;
    }

.instruction.show {
      opacity: 1;
    }

/* Responsive */
    @media (max-width: 640px) {
      .slide-title {
        font-size: 1.8rem;
      }
      
      .ios-card {
        width: 95%;
        padding: 2rem 1.5rem;
      }
    }
  </style>
</head>
<body x-data="sliderComponent()">
  
  <canvas id="three-canvas"></canvas>

<div class="ios-slider" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
    
    <div class="slide" :class="{ 'active': currentIndex === 0, 'prev': currentIndex === 1, 'next': currentIndex === 2 }">
      <div class="ios-card" x-ref="card1">
        <h2 class="slide-title">Perspective 3D</h2>
        <p class="slide-text">Laissez votre téléphone bouger naturellement. Les cartes réagissent à chaque inclinaison pour une expérience immersive.</p>
        <div class="w-16 h-1 mx-auto bg-gradient-to-r from-purple-500 to-pink-500 rounded-full"></div>
      </div>
    </div>

<div class="slide" :class="{ 'active': currentIndex === 1, 'prev': currentIndex === 2, 'next': currentIndex === 0 }">
      <div class="ios-card" x-ref="card2">
        <h2 class="slide-title">Glass Morphism</h2>
        <p class="slide-text">Design épuré inspiré d'iOS 26 avec transparence et flou dynamique. Chaque élément respire avec élégance.</p>
        <div class="w-16 h-1 mx-auto bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full"></div>
      </div>
    </div>

<div class="slide" :class="{ 'active': currentIndex === 2, 'prev': currentIndex === 0, 'next': currentIndex === 1 }">
      <div class="ios-card" x-ref="card3">
        <h2 class="slide-title">Mouvement Naturel</h2>
        <p class="slide-text">Les animations suivent les lois physiques d'iOS : fluides, précises et toujours dans le bon timing.</p>
        <div class="w-16 h-1 mx-auto bg-gradient-to-r from-amber-500 to-orange-500 rounded-full"></div>
      </div>
    </div>

<div class="slider-pagination">
      <template x-for="i in slidesCount" :key="i">
        <div class="pagination-dot" :class="{ 'active': currentIndex === i }"></div>
      </template>
    </div>

<div class="instruction" :class="{ 'show': showInstruction }">
      Déplacez votre téléphone ou glissez pour naviguer
    </div>
  </div>

Related Examples