如何使用 CSS 在鼠标悬停时创建 3D 翻转效果
主题:HTML / CSS
答案:使用 CSS backface-visibility 属性
您可以将 CSS backface-visibility 属性与 transform 函数结合使用来创建令人惊叹的翻转和旋转效果，而无需使用任何 JavaScript。
在下面的示例中，有两张图片，一张是扑克牌的正面，另一张是扑克牌的背面。 使用 CSS定位 方法将卡片的背面放在正面之上，这样一开始只有卡片的一面是可见的。
当您将光标放在卡片的背面时，它会旋转并显示卡片的正面。 前后元素的 backface-visibility 都是 hidden 的，所以翻转后的元素的背面在变换过程中不显示，从而产生 3D 旋转的错觉。 让我们尝试一下，了解 3D 翻转的具体工作原理:
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>鼠标悬停时的 CSS 3D 旋转</title>
<style>
.flip-container {
margin: 50px;
perspective: 1000;
display: inline-block;
}
.flip-container:hover .card {
transform: rotateY(180deg);
}
.card, .front, .back {
width: 130px;
height: 195px;
}
.card {
transition: 0.5s;
transform-style: preserve-3d;
position: relative;
}
.front, .back {
backface-visibility: hidden;
position: absolute;
}
.front {
z-index: 1;
transform: rotateY(180deg);
background: url("images/card-front.jpg") no-repeat;
}
.back {
z-index: 2; /* back side, placed above front */
transform: rotateY(0deg);
background: url("images/card-back.jpg") no-repeat;
}
</style>
</head>
<body>
<div class="flip-container">
<div class="card">
<div class="front">
<!-- front side content -->
</div>
<div class="back">
<!-- back side content -->
</div>
</div>
</div>
</body>
</html>您也可以使用两个不同的 <img>background 中使用它们，但是在开始翻转时您可能会感到有些抽搐，因为图像会需要一些时间才能加载到页面上。 查看示例。
注意:只需将 <div> 容器内，以自定义此示例。
Internet Explorer 中的 3D 翻转
由于缺乏对 CSS3 transform 属性的支持，上面的示例无法在 Internet Explorer 中正常运行。 但是，同时翻转前后元素，我们可以达到与前面示例相同的效果。 此示例适用于 IE10 及更高版本。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS 3D 在 IE 中旋转</title>
<style>
.flip-container {
margin: 50px;
perspective: 1000;
display: inline-block;
}
.flip-container:hover .back {
transform: rotateY(180deg);
}
.flip-container:hover .front {
transform: rotateY(0deg);
}
.flip-container, .front, .back {
width: 130px;
height: 195px;
}
.card {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front, .back {
position: absolute;
backface-visibility: hidden;
transition: 0.6s;
transform-style: preserve-3d;
}
.front {
z-index: 1;
transform: rotateY(-180deg);
background: url("images/card-front.jpg") no-repeat;
}
.back {
z-index: 2;
transform: rotateY(0deg);
background: url("images/card-back.jpg") no-repeat;
}
</style>
</head>
<body>
<div class="flip-container">
<div class="card">
<div class="front">
<!-- front content -->
</div>
<div class="back">
<!-- back content -->
</div>
</div>
</div>
</body>
</html>FAQ 相关问题解答
以下是与此主题相关的更多常见问题解答:
