→ Sofia Martinez
→ Pokemon Card with Flip Animation

Pokemon Card with Flip Animation

A beautifully designed interactive Pokemon card with 3D flip animation, displaying character stats and type information.

This Example is contributed by Sofia Martinez, on 11-Mar-2025. It is responsive. similar terms for this example are Card Design,Cards,Transitions

Card Animation Pokemon Flip Card

Author Sofia Martinez

Fork Fullscreen

<div class="card-container">
  <div class="pokemon-card">
    <div class="card-front">
      <div class="card-header">
        <div class="pokemon-name">Charizard</div>
        <div class="hp">HP 120</div>
      </div>
      <div class="pokemon-image">
        <img src="https://assets.pokemon.com/assets/cms2/img/pokedex/full/006.png" alt="Charizard">
      </div>
      <div class="pokemon-type">Fire</div>
      <div class="card-info">
        <div class="info-row">
          <span class="info-label">Type:</span>
          <span class="info-value">Fire/Flying</span>
        </div>
        <div class="info-row">
          <span class="info-label">Height:</span>
          <span class="info-value">1.7m</span>
        </div>
        <div class="info-row">
          <span class="info-label">Weight:</span>
          <span class="info-value">90.5kg</span>
        </div>
      </div>
      <div class="card-footer">
        <div class="evolution">Stage 2</div>
        <div class="card-number">#006</div>
      </div>
    </div>
    <div class="card-back">
      <div class="card-back-content">
        <div class="poke-logo">
          <span>Pokémon</span>
        </div>
        <div class="stats">
          <h3>Base Stats</h3>
          <div class="stat-bar">
            <span class="stat-name">Attack</span>
            <div class="stat-value-container">
              <div class="stat-value" style="width: 84%;"></div>
            </div>
            <span class="stat-number">84</span>
          </div>
          <div class="stat-bar">
            <span class="stat-name">Defense</span>
            <div class="stat-value-container">
              <div class="stat-value" style="width: 78%;"></div>
            </div>
            <span class="stat-number">78</span>
          </div>
          <div class="stat-bar">
            <span class="stat-name">Sp. Atk</span>
            <div class="stat-value-container">
              <div class="stat-value" style="width: 109%;"></div>
            </div>
            <span class="stat-number">109</span>
          </div>
          <div class="stat-bar">
            <span class="stat-name">Sp. Def</span>
            <div class="stat-value-container">
              <div class="stat-value" style="width: 85%;"></div>
            </div>
            <span class="stat-number">85</span>
          </div>
          <div class="stat-bar">
            <span class="stat-name">Speed</span>
            <div class="stat-value-container">
              <div class="stat-value" style="width: 100%;"></div>
            </div>
            <span class="stat-number">100</span>
          </div>
        </div>
        <div class="description">
          Charizard flies around the sky in search of powerful opponents. It breathes fire of such great heat that it melts anything. However, it never turns its fiery breath on any opponent weaker than itself.
        </div>
      </div>
    </div>
  </div>
</div>

Related Examples

Flip Animation Profile Info Card
Clean and responsive animated information card with subtle hover effects and smooth transitions, ideal for portfolios, team pages, or product showcases.

Author:
Morgan

3 months ago
Interactive Profile Card with Social Media Links
Stunning profile card featuring smooth 3D transitions, social media integration, and modern gradient effects for enhanced user engagement

Author:
Emma Thompson

4 months ago
Flipping Card Animation
A stylish interactive card that smoothly flips to reveal content on the back when hovered. Perfect for showcasing product features or team members.

Author:
Sofia Martinez

3 months ago
Futuristic 3D Tilt Card with Dynamic Hover Effect
Create an immersive user experience with this futuristic 3D tilt card component that responds to mouse movement with dynamic perspective shifting and depth effects.

Author:
Anonymous

3 months ago
Gradient Morphing Card with 3D Hover Effect
Elegant floating card component with dynamic gradient animation and smooth 3D hover interactions, perfect for showcasing premium content or user profiles.

Author:
Anonymous

4 months ago
Stunning E-commerce Product Card with Elegant Hover Animation

Author:
Jorrit

3 months ago
Profile Card with Hover Reveal

Author:
Anonymous

2 months ago
Gradient Bordered Card

Author:
Anonymous

4 months ago
Animated Profile Card with Hover Effects and Social Links

Author:
Priya Sharma

4 months ago
3D Floating Card
Interactive card component featuring advanced CSS transforms, realistic shadow effects, and responsive design for enhanced user engagement.

Author:
Anonymous

4 months ago
Vibrant Neon Gradient Profile Card
Stunning neon gradient card with glowing edges and a sleek information section, perfect for showcasing user profiles or product details with a futuristic cyberpunk aesthetic.

Author:
Alexis Rivera

3 months ago
Floating Content Cards with 3D Effects

Author:
Anonymous

4 months ago

Explore components by Tags

Didn't find component you were looking for?

Search from 500+ components