# Flip beim Hover (C 038)

Kategorie: Cards  
Tags: flip, 3d, hover, two-sided, light  
Seite: https://designforai.dev/de/snippet/card-038

## Prompt

Baue eine 260x180px CSS-only Flip-Card. Äußerer Wrapper mit perspective 1000px; eine innere Box mit transform-style preserve-3d, die sich beim Hover über 700ms mit cubic-bezier(.4,.2,.2,1) um rotateY(180deg) dreht. Zwei absolut positionierte Seiten mit backface-visibility hidden und 16px Radius: die Vorderseite ist weiß mit 1px #e5e7eb Rahmen und #111827 Text, die Rückseite ist um 180deg vorgedreht und mit einem 135deg Gradient #0ea5e9 zu #6366f1 mit weißem Text gefüllt. Inhalt auf beiden Seiten zentriert.

## HTML

```html
<div class="card-038">
  <div class="card-038__inner">
    <div class="card-038__front"><h3>Hover to flip</h3><p>Front side</p></div>
    <div class="card-038__back"><h3>Back side</h3><p>Rotates 180deg on the Y axis.</p></div>
  </div>
</div>
```

## CSS

```css
.card-038 {
  width: 260px;
  height: 180px;
  perspective: 1000px;
  font-family: system-ui,sans-serif
}
.card-038__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.4,.2,.2,1)
}
.card-038:hover .card-038__inner {
  transform: rotateY(180deg)
}
.card-038__front,.card-038__back {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden
}
.card-038__front {
  background: #fff;
  border: 1px solid #e5e7eb;
  color: #111827
}
.card-038__back {
  background: linear-gradient(135deg,#0ea5e9,#6366f1);
  color: #fff;
  transform: rotateY(180deg)
}
.card-038 h3 {
  margin: 0 0 4px;
  font-size: 18px
}
.card-038 p {
  margin: 0;
  font-size: 13px;
  opacity: .8
}
```