如何创建 - 3D 翻转框
了解如何使用 CSS 创建翻转框。
翻转框
将鼠标移到下面的方框上以查看效果:
如何创建翻转框
步骤 1) 添加 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>Back Side</h2>
</div>
</div>
</div>
步骤 2) 添加 CSS:
实例
/* 翻盖箱容器 - 将宽度和高度设置为您想要的任何值。 我们添加了边框属性来演示翻转本身在悬停时会开箱即用（如果您不想要 3D 效果，请删除透视图 */
.flip-box {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective:
1000px;
/* 如果您不想要 3D 效果，请将其删除 */
}
/* 需要这个容器来定位正面和背面 */
.flip-box-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform
0.8s;
transform-style: preserve-3d;
}
/* 将鼠标移到翻转框容器上时进行水平翻转 */
.flip-box:hover .flip-box-inner {
transform: rotateY(180deg);
}
/* 定位正面和背面 */
.flip-box-front, .flip-box-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
/* Safari */
backface-visibility: hidden;
}
/* 正面样式 */
.flip-box-front {
background-color: #bbb;
color: black;
}
/* 背面样式 */
.flip-box-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
亲自试一试 »
垂直翻转
要进行垂直翻转而不是水平翻转，请使用 rotateX 方法而不是 rotateY:
实例
.flip-box:hover .flip-box-inner {
transform: rotateX(180deg);
}
.flip-box-back {
transform: rotateX(180deg);
}
亲自试一试 »
注释:这些示例无法在平板电脑和/或手机上正常运行。
提示:转到我们的 CSS 2D 变换教程，了解有关 2D 变换的更多信息，例如 rotate() 方法。
提示:转到我们的CSS 3D 变换教程，了解有关 3D 变换的更多信息。
