我找到了这个关于如何用 CSS 翻转 div 的教程。你可以在这里找到结果。现在的问题是，我想在悬停后将拼图块翻转到后面，这样背面的信息仍然可见。现在我在使用 css3 方面不是很擅长。因此，非常感谢您对实现期望的任何帮助！
这是我正在使用的代码：
html:
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="puzzel-stuk">
<div class="front" style="background:url('img/puzzel-links-boven-gesloten.png'); background-repeat:no-repeat; width: 323px; height: 429px;"></div>
<div class="back" style="background:url('img/puzzel-links-boven-open.png'); background-repeat:no-repeat; width: 323px; height: 429px; text-align:left;">
<div class="stap-title">
<h1>Stap 1</h1>
</div>
<div class="stap-tekst" style="margin-left:10px;">
Kies een geschikte achtergrond,<br/>
zodat uw brief meer opvalt<br/>
bij uw potentiële werkgever.
</div>
</div>
</div>
</div>
</div>
CSS：
/* simple */
.flip-container {
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
-ms-transform: perspective(1000px);
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
}
/*
.flip-container:hover .flipper, .flip-container.hover .flipper, #flip-toggle.flip .flipper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
filter: FlipH;
-ms-filter: "FlipH";
}
*/
/* START: Accommodating for IE */
.flip-container:hover .back, .flip-container.hover .back {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.flip-container:hover .front, .flip-container.hover .front {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
/* END: Accommodating for IE */
.flip-container, .front, .back {
width: 320px;
height: 427px;
font-size:18px;
display:inline-block;
float:left;
}
.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-ms-transition: 0.6s;
-moz-transition: 0.6s;
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
-o-transition: 0.6s;
-o-transform-style: preserve-3d;
-ms-transition: 0.6s;
-ms-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: absolute;
top: 0;
left: 0;
}
.front {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
background: lightgreen;
z-index: 2;
}
.back {
background: lightblue;
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.front .name {
font-size: 2em;
display: inline-block;
background: rgba(33, 33, 33, 0.9);
color: #f8f8f8;
font-family: Courier;
padding: 5px 10px;
border-radius: 5px;
bottom: 60px;
left: 25%;
position: absolute;
text-shadow: 0.1em 0.1em 0.05em #333;
display: none;
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
transform: rotate(-20deg);
}
.back-logo {
position: absolute;
top: 40px;
left: 90px;
width: 160px;
height: 117px;
background: url(logo.png) 0 0 no-repeat;
}
.back-title {
font-weight: bold;
color: #00304a;
position: absolute;
top: 180px;
left: 0;
right: 0;
text-align: center;
text-shadow: 0.1em 0.1em 0.05em #acd7e5;
font-family: Courier;
font-size: 2em;
}
.back p {
position: absolute;
bottom: 40px;
left: 0;
right: 0;
text-align: center;
padding: 0 20px;
}
/* vertical */
.vertical.flip-container {
position: relative;
}
.vertical .back {
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.vertical.flip-container .flipper {
-webkit-transform-origin: 100% 213.5px;
-moz-transform-origin: 100% 213.5px;
-ms-transform-origin: 100% 213.5px;
transform-origin: 100% 213.5px;
}
/*
.vertical.flip-container:hover .flipper {
-webkit-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
-ms-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
*/
/* START: Accommodating for IE */
.vertical.flip-container:hover .back, .vertical.flip-container.hover .back {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
transform: rotateX(0deg);
}
.vertical.flip-container:hover .front, .vertical.flip-container.hover .front {
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
}
/* END: Accommodating for IE */
.stap-title {
width:40%;
margin:0 auto;
margin-top:10px;
display:block;
position:relative;
}
.stap-tekst {
margin-left:10px;
margin-right:10px;
margin-top:20px;
display:block;
width:auto;
position:relative;
}