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

184

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

Design
by salvator

Author:
Baraka Salvator

8 months ago

948
Hero w/ navbar
the modern and clean hero section

Author:
Carla Hoffman

1 year ago

5.4k
Hero section
Beatiful landing page hero section

Author:
Rajesh Maheshwari

11 months ago

2.3k
Responsive Hero Section
Key features of this hero section: 1. Responsive layout: Uses a column layout on mobile and switches to a row layout on medium screens and larger. 2. Left side: - Company name as a large heading - Brief description - "Learn More" button 3. Right side: - "Why Choose Us?" section with bullet points - Two call-to-action buttons: "Get Started" and "Contact Sales" 4. Styling: - Uses Tailwind's utility classes for responsive design, colors, spacing, and typography - Incorporates a shadow and rounded corners for the right-side content box - Includes hover effects on buttons for better interactivity This hero section will be fully responsive: - On mobile devices, it will stack vertically with the company info on top and the details below. - On larger screens, it will display in a two-column layout. The use of Tailwind CSS classes ensures that the design is consistent and easily adjustable. You can further customize the colors, fonts, and spacing to match your brand's specific design guidelines. Would you like me to explain any part of this code or make any adjustments?

Author:
zobaidul kaziex

1 year ago

2.8k
Hero banner

Author:
Laurits

3 years ago

12.3k
Tailwind Pricing Section
Fully Responsive Pricing Section

Author:
AKASH GANDHAR

1 year ago

1.8k
Frontend Template Open Source Code Website
This frontend template is designed for a website that provides software services and open-source code to users. It serves as a clean, modern UI for browsing, searching, and downloading open-source projects. Building with HTML, tailwindcss for CSS ,

Author:
Rathanak Phan

8 months ago

1.1k
Landing page

Author:
Maxim

10 months ago

1.8k
SaaS Feature Section
It has a Gradient text headline and CTA buttons

Author:
Junclarkaizen Pagu

2 years ago

9.4k
Landing page hero section UI
Modern Hero Section Design

Author:
UI-Templates

4 months ago

526
Portfolio Hero Section 1
visually stunning and captivating hero section component for your portfolio website.

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

5.7k
hero section fullpage

Author:
Leon Bachmann

3 years ago

11.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components