3D Flip effekt med CSS3

Ok, så man har lavet en fin firkant. Hvordan får man den så flippet 180 grader rundt, så man kan se indholdet på bagsiden af den firkant – Ja fordi firkanter på hjemmesider har jo indhold på bagsiden, det ved de fleste bare ikke :)

Spøg til side, vi kigger på hvordan man kan lave en fin lille 3d effekt i CSS.

Hvad snakker han om? Se demoen:

Ideen

For at skabe illusionen af at der er indhold på bagsiden af vores firkant, så bruger vi en ekstra firkant der indeholder teksten der skal være på bagsiden – den flipper vi så 180 grader rundt og flytter den op under den første firkant – nemt og elegant :) Her er markup’en:

<div class="square-wrapper vertical">
  <div class="square">
    <div class="square-front">
      <div class="text-holder">Forsiden</div>
    </div>
    <div class="square-back">
      <div class="text-holder">Og den mørke bagside!</div>
    </div>
  </div>    
</div>

text-holder er blot en ekstra container for at få teksten centreret vertikalt, bare se bort fra den.

Så i vores markup har vi nu .square-front og .square-back som er de elementer vi vil lave vores transform på.

For at flippe noget rundt på bagsiden kan vi bruge transform: rotateY(180deg), det vil roterer firkanten 180 grader rundt om Y aksen og dermed vise bagsiden.

rotation-om-y-aksen

Ok, lad os få tegnet firkanterne og få roteret firkanten der skal være bagsiden:

.square-wrapper {
  perspective: 1000px;
  width: 25%;
  margin: 2rem auto;
}
 
.square {
  position: relative;
  padding-bottom: 100%;
  transform-style: preserve-3d; 
  font-family: helvetica;
  color: white;
}

.square-front, 
.square-back {
  width: 100%;
  padding-bottom: 100%;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  backface-visibility: hidden;
  transition: all 0.7s ease-in-out;
}

.square-front {
  background-color: #336699;
  z-index: 10;
}

.square-back {
  background-color: #224466;
  /* Square-back starter med at være roteret -180 grader */
  transform: rotateY(-180deg); 
}

De forskellige padding og width procent værdier der er sat er for at lave en liquid/responsive firkant, du kan også bare sætte width på square-front og back til en fast værdi.

Men derudover er der lige 3 ting der nok kræver lidt forklaring:

  • perspective: 1000px
  • transform-style: preserve-3d
  • backface-visibility: hidden
  • transition: all 0.7s ease-in-out;

En perspective på 1000px – Ja, uden at kloge mig på for meget 3D teori, så er det kort fortalt det der skal til for at man får fornemmelse af 3D. Uden en perspective værdi ville alle siderne af en firkant blive set som var de samme størrelse selvom at bagsiden jo er længere bagud i 3D viewet.

transform-style: preserve-3d sørger for at de transform vi laver sker i 3D og ikke i 2D. Se bedre forklaring her.

backface-visibility: hidden sørger for at skjule bagsiden af vores roterede element – uden denne ville man kunne se igennem forsiden når den var roteret og da forsiden jo faktisk ligger over vores bagside selvom den er roteret, så vil vi gerne have at den bliver usynlig.

transition: all 0.7s ease-in-out sørger for at vores transform sker over 7 sekunder, så vi kan nå at se effekten.

Ok, nu er vores forside fin og vores bagside roteret minus 180 grader og lagt bag forsiden – men vi mangler at den roterer når vi kører musen over den:

.vertical {
  &.square-wrapper:hover .square-front {
    transform: rotateY(180deg);
  }
  &.square-wrapper:hover .square-back {
    transform: rotateY(0);
  }
}

.horizontal {
  .square-back {
    transform: rotateX(-180deg);
  }
  &.square-wrapper:hover .square-front {
    transform: rotateX(180deg);
  }
  &.square-wrapper:hover .square-back {
    transform: rotateX(0);
  }
}

Her roteres square-front 180 grader om Y aksen og square-back sættes tilbage til 0 grader. Og det var det!

Og jeg har tilføjet en lille .horizontal klasse også til at kunne roterer firkanten rundt om X-aksen i stedet.

Browser support

Hvis man lige ser bort fra at jeg ikke har vendor prefix på i eksemplet (Få det evt. automatisk med auto-prefixer) så ville det ellers kunne kører i alle nyere browserer, og ja dvs. Internet Explorer er også deribland :)

Kommentarer

  1. Der er jo lidt snyd – DIV’en roterer ikke, men bliver lagt ned og rejst op.
    Hvis du sætter transition op til et par sekunder ses det tydeligt.

  2. Hva fand..! Jamen du har da så fuldstændig ret :) Det kunne jeg godt nok ikke se, den havde narret min hjerne åbenbart. Men efter jeg lige har rettet back til minus 180deg (så den roteres samme retning som fronten) så blev det rimelig tydeligt for mig også. Godt spottet!

  3. Jeg må tilstå det var en kollega der så det :-/

    Det kunne være superfedt hvis du vil vise hvordan man lavede det vha. javascript – f.eks. efter 3 sekunder:
    setTimeout(function(){
    //ændreclass – hvordan egentlig :-/

    },3000);

Smid en kommentar

Felter markeret med * skal udfyldes og din e-mail-adresse vil ikke blive offentliggjort.