Sei un recruiter? Clicca qui!
Logo piccolo
Flip-box CSS3 creare un’immagine che si gira al passaggio del mouse senza plugin

Flip-box CSS3: creare un’immagine che si gira al passaggio del mouse senza plugin

Scritto da Sergio Pinna il

30/04/2026

Le animazioni possono rendere un sito più dinamico, più moderno e anche più piacevole da navigare. Il punto, però, è sempre lo stesso: non bisogna esagerare.

Un effetto interessante, se usato nel modo giusto, è la flip-box: un box che mostra un’immagine sul lato frontale e, al passaggio del mouse, si gira rivelando un secondo contenuto sul retro.

È un effetto molto usato nei siti portfolio, nelle sezioni servizi, nelle card prodotto, nelle presentazioni di team oppure nelle landing page dove si vuole dare un po’ di interazione senza appesantire troppo la pagina.

La cosa bella è che possiamo realizzarlo solo con HTML e CSS3, senza JavaScript e senza installare plugin.

In questo articolo vediamo come creare una flip-box pulita, responsive e facilmente inseribile anche dentro WordPress.

Che cos’è una flip-box?

Una flip-box è una card interattiva composta da due lati:

  • un lato frontale, solitamente con un’immagine;
  • un lato posteriore, solitamente con titolo, testo e pulsante.

Quando l’utente passa sopra la card con il mouse, il box ruota di 180 gradi e mostra il retro.

Dal punto di vista tecnico, l’effetto si basa su alcune proprietà CSS3 molto utili:

perspective
transform-style
transform
rotateY
backface-visibility
transition

In pratica, il contenitore crea uno spazio tridimensionale, mentre il contenuto interno ruota sull’asse Y.

Il risultato che vogliamo ottenere

L’obiettivo è creare una card di questo tipo:

  • immagine visibile inizialmente;
  • animazione fluida al passaggio del mouse;
  • contenuto testuale sul retro;
  • nessun JavaScript;
  • nessun plugin;
  • codice semplice da modificare;
  • struttura utilizzabile anche in WordPress.

Codice HTML della flip-box

Questo è il codice HTML della nostra flip-box.

Puoi inserirlo in una normale pagina HTML oppure, se usi WordPress, dentro un blocco HTML personalizzato.

<div class="sp-flip-box" tabindex="0">
  <div class="sp-flip-box__inner">

    <div class="sp-flip-box__face sp-flip-box__front">
      <img 
        src="https://www.tuosito.it/wp-content/uploads/immagine-demo.jpg" 
        alt="Esempio di immagine con effetto flip-box CSS3"
      >
    </div>

    <div class="sp-flip-box__face sp-flip-box__back">
      <div class="sp-flip-box__content">
        <span class="sp-flip-box__label">CSS3 Effect</span>
        <h3>Flip-box senza plugin</h3>
        <p>
          Un effetto semplice e leggero per mostrare contenuti nascosti
          dietro un’immagine, usando solamente HTML e CSS.
        </p>
        <a href="#" class="sp-flip-box__button">Scopri di più</a>
      </div>
    </div>

  </div>
</div>

La struttura è abbastanza semplice.

Abbiamo un contenitore principale:

<div class="sp-flip-box">

Poi un elemento interno che sarà quello realmente animato:

<div class="sp-flip-box__inner">

Infine abbiamo due facce:

<div class="sp-flip-box__front">
<div class="sp-flip-box__back">

La parte frontale contiene l’immagine.
La parte posteriore contiene il testo.

Codice CSS completo

Adesso passiamo alla parte più importante: il CSS.

.sp-flip-box {
  width: 100%;
  max-width: 420px;
  height: 320px;
  perspective: 1000px;
  margin: 40px auto;
}

.sp-flip-box__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s ease;
  transform-style: preserve-3d;
}

.sp-flip-box:hover .sp-flip-box__inner,
.sp-flip-box:focus-within .sp-flip-box__inner {
  transform: rotateY(180deg);
}

.sp-flip-box__face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  overflow: hidden;
  backface-visibility: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
}

.sp-flip-box__front {
  background: #f4f4f4;
}

.sp-flip-box__front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sp-flip-box__back {
  background: linear-gradient(135deg, #1e293b, #0f172a);
  color: #ffffff;
  transform: rotateY(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
}

.sp-flip-box__content {
  max-width: 320px;
}

.sp-flip-box__label {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #93c5fd;
  font-weight: 700;
}

.sp-flip-box__content h3 {
  margin: 0 0 14px;
  font-size: 1.6rem;
  line-height: 1.2;
}

.sp-flip-box__content p {
  margin: 0 0 22px;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}

.sp-flip-box__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  background: #ffffff;
  color: #0f172a;
  text-decoration: none;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease;
}

.sp-flip-box__button:hover {
  transform: translateY(-2px);
  background: #dbeafe;
}

Come funziona il CSS della flip-box

Il cuore dell’effetto è questo blocco:

.sp-flip-box {
  perspective: 1000px;
}

La proprietà perspective serve a creare profondità. Senza questa proprietà, la rotazione sarebbe molto più piatta e meno realistica.

Poi abbiamo questo elemento:

.sp-flip-box__inner {
  transform-style: preserve-3d;
  transition: transform 0.8s ease;
}

Qui diciamo al browser due cose:

  1. gli elementi interni devono mantenere un comportamento tridimensionale;
  2. la trasformazione deve avvenire in maniera fluida.

L’effetto vero e proprio avviene qui:

.sp-flip-box:hover .sp-flip-box__inner,
.sp-flip-box:focus-within .sp-flip-box__inner {
  transform: rotateY(180deg);
}

Quando l’utente passa con il mouse sopra la card, l’elemento interno ruota di 180 gradi sull’asse Y.

La parte posteriore, invece, è già ruotata di 180 gradi:

.sp-flip-box__back {
  transform: rotateY(180deg);
}

In questo modo, quando tutta la card gira, il retro diventa leggibile.

La proprietà più importante: backface-visibility

Una proprietà fondamentale per ottenere un effetto pulito è questa:

backface-visibility: hidden;

Senza questa regola, durante la rotazione potremmo vedere il “retro” degli elementi, creando un effetto visivo confuso.

Applicandola alle due facce della card, il browser nasconde il lato non visibile e rende l’animazione molto più pulita.

Versione responsive

Il codice precedente funziona già bene, ma possiamo aggiungere qualche regola per migliorare la visualizzazione da mobile.

@media (max-width: 600px) {
  .sp-flip-box {
    max-width: 100%;
    height: 280px;
    margin: 24px auto;
  }

  .sp-flip-box__back {
    padding: 24px;
  }

  .sp-flip-box__content h3 {
    font-size: 1.35rem;
  }

  .sp-flip-box__content p {
    font-size: 0.95rem;
  }
}

Su smartphone l’altezza viene leggermente ridotta e i testi diventano più proporzionati.

Attenzione al mobile: hover e touch screen

Su desktop l’effetto funziona con :hover, quindi quando l’utente passa sopra la card con il mouse.

Su mobile, però, il concetto di hover è diverso. Alcuni browser simulano il passaggio del mouse al primo tap, altri si comportano in modo meno prevedibile.

Per questo nel codice abbiamo aggiunto anche:

.sp-flip-box:focus-within .sp-flip-box__inner {
  transform: rotateY(180deg);
}

E nell’HTML abbiamo inserito:

tabindex="0"

In questo modo la card può ricevere il focus e l’effetto risulta più accessibile anche da tastiera.

Non è una soluzione perfetta per ogni caso, ma è un buon compromesso se vogliamo rimanere su una soluzione solo CSS, senza JavaScript.

Variante: flip-box con rotazione verticale

Se invece vuoi che la card si giri dall’alto verso il basso, puoi usare rotateX al posto di rotateY.

Modifica questa parte:

.sp-flip-box:hover .sp-flip-box__inner,
.sp-flip-box:focus-within .sp-flip-box__inner {
  transform: rotateY(180deg);
}

in questo modo:

.sp-flip-box:hover .sp-flip-box__inner,
.sp-flip-box:focus-within .sp-flip-box__inner {
  transform: rotateX(180deg);
}

E modifica anche il retro:

.sp-flip-box__back {
  transform: rotateX(180deg);
}

Il risultato sarà una rotazione verticale, più simile a una card che si ribalta dall’alto verso il basso.

Variante con più flip-box affiancate

In molti casi potresti voler usare questo effetto non per una singola immagine, ma per una griglia di card.

Per esempio, una sezione servizi con tre box:

<div class="sp-flip-grid">

  <div class="sp-flip-box" tabindex="0">
    <div class="sp-flip-box__inner">
      <div class="sp-flip-box__face sp-flip-box__front">
        <img src="immagine-1.jpg" alt="Realizzazione siti WordPress">
      </div>
      <div class="sp-flip-box__face sp-flip-box__back">
        <div class="sp-flip-box__content">
          <span class="sp-flip-box__label">Servizio</span>
          <h3>Siti WordPress</h3>
          <p>Creo siti web professionali, veloci e facili da gestire.</p>
          <a href="#" class="sp-flip-box__button">Leggi di più</a>
        </div>
      </div>
    </div>
  </div>

  <div class="sp-flip-box" tabindex="0">
    <div class="sp-flip-box__inner">
      <div class="sp-flip-box__face sp-flip-box__front">
        <img src="immagine-2.jpg" alt="Restyling siti web">
      </div>
      <div class="sp-flip-box__face sp-flip-box__back">
        <div class="sp-flip-box__content">
          <span class="sp-flip-box__label">Servizio</span>
          <h3>Restyling sito</h3>
          <p>Miglioro siti esistenti rendendoli più chiari, moderni e usabili.</p>
          <a href="#" class="sp-flip-box__button">Leggi di più</a>
        </div>
      </div>
    </div>
  </div>

  <div class="sp-flip-box" tabindex="0">
    <div class="sp-flip-box__inner">
      <div class="sp-flip-box__face sp-flip-box__front">
        <img src="immagine-3.jpg" alt="Ottimizzazione UX e performance">
      </div>
      <div class="sp-flip-box__face sp-flip-box__back">
        <div class="sp-flip-box__content">
          <span class="sp-flip-box__label">Servizio</span>
          <h3>UX e performance</h3>
          <p>Ottimizzo esperienza utente, velocità e struttura delle pagine.</p>
          <a href="#" class="sp-flip-box__button">Leggi di più</a>
        </div>
      </div>
    </div>
  </div>

</div>

Poi aggiungiamo il CSS per la griglia:

.sp-flip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1200px;
  margin: 60px auto;
  padding: 0 20px;
}

.sp-flip-grid .sp-flip-box {
  margin: 0;
  max-width: none;
}

@media (max-width: 900px) {
  .sp-flip-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .sp-flip-grid {
    grid-template-columns: 1fr;
  }
}

In questo modo otteniamo una griglia responsive:

  • 3 colonne su desktop;
  • 2 colonne su tablet;
  • 1 colonna su mobile.

Dove inserire il codice in WordPress

Se usi WordPress, hai diverse possibilità.

La soluzione più semplice è questa:

  1. inserisci l’HTML dentro un blocco HTML personalizzato;
  2. inserisci il CSS in Aspetto > Personalizza > CSS aggiuntivo.

Se invece usi un tema child, puoi inserire il CSS direttamente nel file:

style.css

Se usi plugin come Code Snippets, WPCode o simili, puoi creare uno snippet CSS dedicato, ma per un effetto di questo tipo il CSS aggiuntivo del tema è spesso più che sufficiente.

Esempio pratico dentro WordPress

Dentro l’editor di WordPress puoi aggiungere un blocco HTML personalizzato e incollare questo codice:

<div class="sp-flip-box" tabindex="0">
  <div class="sp-flip-box__inner">

    <div class="sp-flip-box__face sp-flip-box__front">
      <img 
        src="https://www.sergiopinna.it/wp-content/uploads/la-tua-immagine.jpg" 
        alt="Esempio di flip-box CSS3"
      >
    </div>

    <div class="sp-flip-box__face sp-flip-box__back">
      <div class="sp-flip-box__content">
        <span class="sp-flip-box__label">Tutorial CSS</span>
        <h3>Effetto flip-box</h3>
        <p>
          Una card animata che mostra un’immagine sul fronte
          e un contenuto testuale sul retro.
        </p>
        <a href="#" class="sp-flip-box__button">Guarda il tutorial</a>
      </div>
    </div>

  </div>
</div>

Poi sostituisci:

https://www.sergiopinna.it/wp-content/uploads/la-tua-immagine.jpg

con l’URL reale della tua immagine.

Buone pratiche per usare una flip-box

La flip-box è un effetto bello, ma va usato con un minimo di attenzione.

Il primo consiglio è di non nascondere informazioni fondamentali solo sul retro della card. Se un contenuto è davvero importante, dovrebbe essere raggiungibile anche in modo tradizionale.

Il secondo consiglio è di non usare troppe flip-box nella stessa pagina. Una o tre card possono dare movimento. Venti card animate, invece, rischiano di diventare pesanti e confuse.

Il terzo consiglio riguarda le immagini: devono avere dimensioni corrette, essere ottimizzate e avere sempre un testo alternativo descrittivo.

Per esempio:

alt="Esempio di card con effetto flip realizzata in CSS3"

Meglio evitare alt generici come:

alt="immagine"

oppure:

alt="foto"

Il testo alternativo deve spiegare cosa rappresenta l’immagine, non limitarsi a dire che è un’immagine.

Accessibilità: cosa considerare

Dal punto di vista dell’accessibilità, gli effetti basati solo su hover possono creare qualche limite.

Un utente che naviga da tastiera potrebbe non riuscire ad attivare correttamente l’effetto se la card non può ricevere il focus.

Per questo abbiamo usato:

tabindex="0"

e nel CSS:

.sp-flip-box:focus-within .sp-flip-box__inner {
  transform: rotateY(180deg);
}

Questo rende la card più gestibile anche senza mouse.

Un’altra cosa da considerare è il movimento. Alcuni utenti preferiscono ridurre le animazioni nel browser o nel sistema operativo. Possiamo rispettare questa preferenza con una media query dedicata.

@media (prefers-reduced-motion: reduce) {
  .sp-flip-box__inner {
    transition: none;
  }
}

In questo modo, se l’utente ha impostato la riduzione delle animazioni, il browser non applicherà la transizione fluida.

Codice finale completo

Qui trovi il codice completo da usare come base.

HTML:

<div class="sp-flip-box" tabindex="0">
  <div class="sp-flip-box__inner">

    <div class="sp-flip-box__face sp-flip-box__front">
      <img 
        src="https://www.tuosito.it/wp-content/uploads/immagine-demo.jpg" 
        alt="Esempio di immagine con effetto flip-box CSS3"
      >
    </div>

    <div class="sp-flip-box__face sp-flip-box__back">
      <div class="sp-flip-box__content">
        <span class="sp-flip-box__label">CSS3 Effect</span>
        <h3>Flip-box senza plugin</h3>
        <p>
          Un effetto semplice e leggero per mostrare contenuti nascosti
          dietro un’immagine, usando solamente HTML e CSS.
        </p>
        <a href="#" class="sp-flip-box__button">Scopri di più</a>
      </div>
    </div>

  </div>
</div>

e il CSS:

.sp-flip-box {
  width: 100%;
  max-width: 420px;
  height: 320px;
  perspective: 1000px;
  margin: 40px auto;
}

.sp-flip-box__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s ease;
  transform-style: preserve-3d;
}

.sp-flip-box:hover .sp-flip-box__inner,
.sp-flip-box:focus-within .sp-flip-box__inner {
  transform: rotateY(180deg);
}

.sp-flip-box__face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  overflow: hidden;
  backface-visibility: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
}

.sp-flip-box__front {
  background: #f4f4f4;
}

.sp-flip-box__front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sp-flip-box__back {
  background: linear-gradient(135deg, #1e293b, #0f172a);
  color: #ffffff;
  transform: rotateY(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
}

.sp-flip-box__content {
  max-width: 320px;
}

.sp-flip-box__label {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #93c5fd;
  font-weight: 700;
}

.sp-flip-box__content h3 {
  margin: 0 0 14px;
  font-size: 1.6rem;
  line-height: 1.2;
}

.sp-flip-box__content p {
  margin: 0 0 22px;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}

.sp-flip-box__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  background: #ffffff;
  color: #0f172a;
  text-decoration: none;
  font-weight: 700;
  transition: transform 0.25s ease, background 0.25s ease;
}

.sp-flip-box__button:hover {
  transform: translateY(-2px);
  background: #dbeafe;
}

@media (max-width: 600px) {
  .sp-flip-box {
    max-width: 100%;
    height: 280px;
    margin: 24px auto;
  }

  .sp-flip-box__back {
    padding: 24px;
  }

  .sp-flip-box__content h3 {
    font-size: 1.35rem;
  }

  .sp-flip-box__content p {
    font-size: 0.95rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sp-flip-box__inner {
    transition: none;
  }
}

Quando usare questo effetto

Una flip-box CSS3 può essere utile in diversi contesti:

  • card servizi;
  • box portfolio;
  • presentazione di progetti;
  • schede team;
  • anteprime di articoli;
  • sezioni prodotto;
  • landing page promozionali;
  • blocchi informativi più dinamici.

Per esempio, in una pagina portfolio potresti mostrare sul fronte lo screenshot del sito realizzato e sul retro una breve descrizione del progetto, con un pulsante che porta al case study.

In una pagina servizi, invece, potresti usare il fronte per un’immagine evocativa e il retro per spiegare il servizio in poche righe.

Vantaggi di una flip-box solo CSS

Il vantaggio principale è la leggerezza.

Non serve installare un plugin solo per ottenere un piccolo effetto grafico. Non serve nemmeno caricare JavaScript aggiuntivo.

Con poche righe di CSS possiamo ottenere un’interazione elegante e completamente personalizzabile.

Inoltre, lavorando direttamente sul codice, possiamo controllare meglio:

  • dimensioni;
  • colori;
  • bordi;
  • ombre;
  • velocità dell’animazione;
  • comportamento responsive;
  • stile del pulsante;
  • gestione dell’immagine.

Questo è particolarmente utile in WordPress, dove spesso si tende a installare un plugin per ogni singola funzionalità. In molti casi, però, una soluzione CSS è più pulita, più leggera e più facile da mantenere.

Conclusione

Creare una flip-box con CSS3 è più semplice di quanto possa sembrare.

Con una struttura HTML ordinata e poche proprietà CSS possiamo realizzare un’immagine che si gira al passaggio del mouse, mostrando un contenuto sul retro senza usare JavaScript e senza installare plugin.

È un effetto ideale per dare più movimento a una pagina, soprattutto se usato in sezioni come servizi, portfolio o card informative.

Come sempre, la cosa importante è usarlo con equilibrio: l’animazione deve migliorare l’esperienza utente, non diventare un ostacolo.

Una flip-box ben progettata può rendere una pagina più moderna, più interattiva e più piacevole da esplorare, mantenendo comunque il sito leggero e pulito.

Potrebbe interessarti anche...

Perché abbandonare Elementor e passare a GeneratePress e GenerateBlocks

Perché abbandonare Elementor e passare a GeneratePress e GenerateBlocks

04/05/2026

Un confronto pratico tra Elementor e la combinazione GeneratePress + GenerateBlocks, con focus su velocità, pulizia del codice, manutenzione, SEO e controllo del design.

Leggi l'articolo
Marquee continuo in WordPress: creare una barra scorrevole infinita senza plugin

Marquee continuo in WordPress: creare una barra scorrevole infinita senza plugin

29/04/2026

Scopri come creare un marquee continuo in WordPress senza plugin, usando uno snippet PHP, CSS e JavaScript per ottenere una barra scorrevole infinita, fluida e personalizzabile.

Leggi l'articolo
Antispam Contact Form 7: bloccare i bot senza CAPTCHA con uno snippet PHP

Antispam Contact Form 7: bloccare i bot senza CAPTCHA con uno snippet PHP

29/04/2026

Scopri come bloccare i bot su Contact Form 7 senza CAPTCHA, usando uno snippet PHP che controlla il tempo di compilazione del modulo e riduce gli invii spam.

Leggi l'articolo

Hai una domanda su questo articolo?

Scrivimi pure nei commenti: ti risponderò il prima possibile con un suggerimento pratico.

...aspetta un attimo!

Hai un’idea per un sito, una pagina da migliorare o un progetto ancora da mettere a fuoco? Raccontamelo: possiamo capire insieme da dove partire.

Parlami della tua idea