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

231

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

Hero

Author:
ORGIN_DREAMS

9 months ago

1.4k
Premium High-Performance Web Gaming Hub
Experience the future of browser-based gaming. I’ve developed a premium arcade hub designed for speed, clarity, and zero-latency gameplay. Built with modern web technologies, Ayyamperumal Games brings AAA-inspired visuals and high-octane mechanics directly to your browser—no downloads, no lag, just pure performance. Explore a curated library of titles ranging from minimalist logic puzzles like Sudoku Elite to fast-paced action in Neon Drift. This is where clean code meets high-level entertainment.

Author:
Ayyamperumal S

2 months ago

289
3d Box
Let's build a 3d world empowered by Orgin Dreams.these are 3d objects

Author:
ORGIN_DREAMS

9 months ago

736
Hero section

Author:
iamlos

1 year ago

1.5k
hero section

Author:
Omer fils ELENGA

3 months ago

118
Real Estate Website • Hero Section
polished, professional Hero section

Author:
UI-Templates

4 months ago

574
coffee
a beverage brewed from the roasted and ground seeds of the tropical evergreen coffee plant. Coffee is one of the three most popular beverages in the world (alongside water and tea), and it is one of the most profitable international commodities

Author:
Augustin

9 months ago

1.1k
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Author:
Ayyamperumal S

9 months ago

1.9k
Animated bento box.
A Coastal UI component (coastalui.com). This can be used as part of a bento box, great for showing connectivity between context, could be used beyond just showing tech stacks.

Author:
Coastal UI

11 months ago

1.4k
walve style by omerlink
walve style by omerlink

Author:
Omer fils ELENGA

1 month ago

130
Intelligent AI tools built to help.
Unlock smarter workflows with AI tools designed to boost productivity, simplify tasks and help you do more with less effort.

Author:
Alif Bima Pradana

1 month ago

58
home page
Hero Section: Gradient background with noise texture Animated floating image Gradient text effect Call-to-action buttons Features Section: Three feature cards with gradient headers Hover animations Clean iconography Stats Display: Full-width gradient background Clean stat presentation Testimonials: Three testimonial cards with user avatars Star ratings Border accents Hover scaling effects Call-to-Action (CTA) Section: Gradient background Centered content Multiple action buttons Footer: Four-column layout Social media icons Newsletter signup Copyright information Design Features: Vibrant gradient color scheme Smooth hover animations and transitions Responsive layout for all screen sizes Modern typography Subtle floating animations Clean, card-based design

Author:
ishimwe prince

9 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components