Kuinka luoda: 3D-käännöslaatikko
- Edellinen sivu Hover zoom
- Seuraava sivu Pystysuuntainen keskitetty
Opi, kuinka luoda käännettävä laatikko CSS:n avulla.
Käännöslaatikko
Siirrä hiiri alla olevaan laatikkoon, katso vaikutus:
Kuinka luoda käännettävä laatikko
Vaihe 1 - Lisää HTML:
<div class="flip-box"> <div class="flip-box-inner"> <div class="flip-box-front"> <h2>Front Side</h2> </div> <div class="flip-box-back"> <h2>Takapuoli</h2> </div> </div> </div>
Toinen vaihe - lisää CSS:
/* Kääntölaatikkokontti - aseta haluamasi leveys ja korkeus. Lisäsimme reunan esimerkiksi näyttämään, että kiilto ulottuu laatikkoon (jos et halua 3D-tehoa, poista perspektiivi) */ .flip-box { background-color: transparent; width: 300px; height: 200px; border: 1px solid #f1f1f1; perspective: 1000px; /* Jos et tarvitse 3D-tehoa, poista tämä rivi */ } /* Tämä kontti käytetään etu- ja takapuolen sijainnin määrittämiseen */ .flip-box-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.8s; transform-style: preserve-3d; } /* Kun hiiri siirtyy kiiltojen konttiin, kiiltoja kääntyy horisontaalisesti */ .flip-box:hover .flip-box-inner { transform: rotateY(180deg); } /* Määritä etu- ja takapuolen sijainti */ .flip-box-front, .flip-box-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; /* Safari */ backface-visibility: hidden; } /* Määritä etupuolen tyylit */ .flip-box-front { background-color: #bbb; color: black; } /* Määritä takapuolen tyylit */ .flip-box-back { background-color: dodgerblue; color: white; transform: rotateY(180deg); }
pystysuuntainen pyöriminen
jos haluat tehdä pystysuuntaisen pyörimisen eikä horisontaalisen, käytä rotateX
menetelmä ei rotateY
:
Esimerkki
.flip-box:hover .flip-box-inner { transform: rotateX(180deg); } .flip-box-back { transform: rotateX(180deg); }
Huomioitavaa:Nämä esimerkit eivät välttämättä toimi tabletissa ja/tai puhelimessa.
Liittyvät sivut
Oppitunti:CSS 2D muunnos
Oppitunti:CSS 3D muunnos
- Edellinen sivu Hover zoom
- Seuraava sivu Pystysuuntainen keskitetty