Home
Samuel Abera
3D Animated Image Gallery

27

3D Animated Image Gallery

3D Animated Image Gallery

This tailwind example is contributed by Samuel Abera, on 13-Apr-2024. Component is made with Tailwind CSS v3. similar terms for this example are Masonry, Image grid,Transitions

Carousel Image gallery Hero Animation

Author Samuel Abera

3.6k

3

Fork Fullscreen

<div class="h-screen w-full flex items-center justify-center overflow-hidden bg-purple-300">
    <div class="relative lg:w-[290px] lg:h-[290px] md:w-[220px] md:h-[220px] sm:w-[180px] sm:h-[180px] w-[100px] h-[100px] [transform-style:preserve-3d] animate-[rotate_30s_linear_infinite]">
        <span style="--i:1" class="span-style"><img src="https://images.unsplash.com/photo-1546015720-b8b30df5aa27?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw2fHxiYWJ5fGVufDB8MHx8fDE3MTI5ODgzMTl8MA&ixlib=rb-4.0.3&q=80&w=1080" alt="img - 1"  class="img-style"/></span>
        <span style="--i:2" class="span-style"><img src="https://images.unsplash.com/photo-1566004100631-35d015d6a491?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw0fHxiYWJ5fGVufDB8MHx8fDE3MTI5ODgzMTl8MA&ixlib=rb-4.0.3&q=80&w=1080" alt="img - 2"  class="img-style"/></span>
        <span style="--i:3" class="span-style"><img src="https://images.unsplash.com/photo-1519689680058-324335c77eba?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxMnx8YmFieXxlbnwwfDB8fHwxNzEyOTg4MzE5fDA&ixlib=rb-4.0.3&q=80&w=1080" alt="img - 3"  class="img-style"/></span>
        <span style="--i:4" class="span-style"><img src="https://images.unsplash.com/photo-1588410670460-cdab54625253?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxfHxiYWJ5fGVufDB8MHx8fDE3MTI5ODgzMTl8MA&ixlib=rb-4.0.3&q=80&w=1080" alt="img - 4"  class="img-style"/></span>
        <span style="--i:5" class="span-style"><img src="https://images.unsplash.com/photo-1555252333-9f8e92e65df9?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw1fHxiYWJ5fGVufDB8MHx8fDE3MTI5ODgzMTl8MA&ixlib=rb-4.0.3&q=80&w=1080" alt="img - 5"  class="img-style"/></span>
        <span style="--i:6" class="span-style"><img src="https://images.unsplash.com/photo-1491013516836-7db643ee125a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwyfHxiYWJ5fGVufDB8MHx8fDE3MTI5ODgzMTl8MA&ixlib=rb-4.0.3&q=80&w=1080" alt="img - 6"  class="img-style"/></span>
        <span style="--i:7" class="span-style"><img src="https://images.unsplash.com/photo-1505679208891-9ab12ee61dc1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxNHx8YmFieXxlbnwwfDB8fHwxNzEyOTg4MzE5fDA&ixlib=rb-4.0.3&q=80&w=1080" alt="img - 7"  class="img-style"/></span>
        <span style="--i:8" class="span-style"><img src="https://images.unsplash.com/photo-1583086762675-5a88bcc72548?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw3fHxiYWJ5fGVufDB8MHx8fDE3MTI5ODgzMTl8MA&ixlib=rb-4.0.3&q=80&w=1080" alt="img - 8"  class="img-style"/></span>
    </div>
</div>

Related Examples

image gallery
image gallery [lightbox]

Author:
Anonymous

1 year ago

14.9k
Carousel with Tailwind CSS and Alpine.js
Simple card Carousel

Author:
Brandon D

2 years ago

25k
Image carousel
Uses Flowbite

Author:
Fagundo67

1 year ago

22.5k
Image Carousel

Author:
Nikolai

7 months ago

3.5k
Tailwind image gallery
Responsive grid with evenly spaced image cards. Each card has a title label at the bottom, and there's a subtle hover effect for interactive engagement.

Author:
Alok

1 year ago

46.2k
How to create a carousel with Tailwind CSS and Alpinejs
How to create a carousel with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

5 months ago

1.6k
Welcome banner for developers portfolio
A hero section welcoming visitors to a portfolio or website. It features a large, visually appealing title and an image.

Author:
Vikram Choudhary

1 year ago

7.7k
Very simple hero

Author:
Laurits

1 year ago

6.8k
Hero template

Author:
Leon Bachmann

1 year ago

10k
Basic hero section

Author:
Lîmåã M

1 year ago

13.5k
Product Page
Showcase for the product.

Author:
Prem..

2 years ago

22.6k
Hero section with fancy heading

Author:
Laurits

2 years ago

9.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 1700+ componenent

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components

© 2024 TailwindFlex. All Rights Reserved.

v1.8