CSS实现元素翻转效果

作者：System 时间：2024年08月08日分类：所有,css3 字数：1038

这篇文章距离上次修改已过204天，其中的内容可能已经有所变动。

要使用CSS实现元素的翻转效果，可以使用transform属性中的rotateY函数。以下是一个简单的例子，展示了如何使用CSS来创建一个水平翻转效果：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .flip-card {
    perspective: 1000px;
  }
  .flip-card-inner {
    transition: transform 0.6s;
    transform-style: preserve-3d;
  }
  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }
  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
  }
  .flip-card-back {
    transform: rotateY(180deg);
  }
</style>
</head>
<body>
 
<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      Front
    </div>
    <div class="flip-card-back">
      Back
    </div>
  </div>
</div>
 
</body>
</html>

在这个例子中，.flip-card 是包含翻转效果的容器，.flip-card-inner 是实际进行翻转的元素。通过CSS的:hover伪类，当鼠标悬停在卡片上时，卡片翻转效果开始。.flip-card-front 和 .flip-card-back 分别代表翻转前和翻转后显示的内容。

CSS实现元素翻转效果

评论已关闭

推荐阅读