Jak to zrobić - 3D Flip Box
Dowiedz się, jak utworzyć flip box za pomocą CSS.
Odwróć pudełko
Najedź myszką na pola poniżej, aby zobaczyć efekt:
Odwracanie w poziomie :
Przód
Tył
Przerzucanie w pionie :
Przód
Tył
Jak stworzyć pudełko z klapką
Krok 1) Dodaj kod HTML:
Przykład
<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>Back Side</h2>
</div>
</div>
</div>
Krok 2) Dodaj CSS:
Przykład
/* The flip box container - set the width and height to whatever you want. We
have added the border property to demonstrate that the flip itself goes out of
the box on hover (remove perspective if you don't want the 3D effect */
.flip-box {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective:
1000px; /* Remove this if you don't want the 3D effect */
}
/* This
container is needed to position the front and back side */
.flip-box-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform
0.8s;
transform-style: preserve-3d;
}
/* Do an horizontal
flip when you move the mouse over the flip box container */
.flip-box:hover .flip-box-inner {
transform: rotateY(180deg);
}
/* Position the front and back side */
.flip-box-front, .flip-box-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}
/* Style the front side */
.flip-box-front {
background-color: #bbb;
color: black;
}
/* Style the back side */
.flip-box-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
Odwróć w pionie
Aby wykonać odwrócenie w pionie zamiast w poziomie, użyj rotateX
metody zamiast rotateY
:
Przykład
.flip-box:hover .flip-box-inner {
transform: rotateX(180deg);
}
.flip-box-back {
transform: rotateX(180deg);
}
Uwaga: te przykłady nie działają poprawnie na tabletach i/lub telefonach komórkowych.
Wskazówka: przejdź do naszego samouczka CSS 2D Transforms , aby dowiedzieć się więcej o transformacjach 2D, takich jak metoda rotate().
Wskazówka: przejdź do naszego samouczka CSS 3D Transforms , aby dowiedzieć się więcej o transformacjach 3D.