实现扑克牌翻转效果的css样式

以下是一种实现扑克牌翻转效果的 CSS 样式：

HTML 代码：

<div class="card">
  <div class="card-face card-front"></div>
  <div class="card-face card-back"></div>
</div>

CSS 代码：

.card {
  position: relative;
  width: 100px;
  height: 150px;
  transform-style: preserve-3d;
  transition: transform 0.5s;
}

.card:hover {
  transform: rotateY(180deg);
}

.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.card-front {
  background-color: white;
  border: 1px solid black;
}

.card-back {
  background-image: url("path/to/back-of-card-image.png");
  background-size: cover;
  border: 1px solid black;
  transform: rotateY(180deg);
}

这段 CSS 代码中，我们首先定义了一个 `.card` 类，表示扑克牌的整体容器。我们设置了 `transform-style: preserve-3d;`，将其变为 3D 空间内的元素，同时设置了 `transition: transform 0.5s;`，表示在状态变化时，使用 0.5 秒的时间过渡。

接着，我们定义了 `.card:hover` 类，表示当鼠标悬停在 `.card` 元素上时，执行旋转操作。我们使用了 `transform: rotateY(180deg);`，使其绕 Y 轴旋转 180 度，从而实现翻转效果。

然后，我们定义了两个 `.card-face` 类，分别表示扑克牌的正反两面。这里我们使用了 `position: absolute;`，将其相对于 `.card` 元素进行定位，并设置了 `width: 100%;` 和 `height: 100%;`，使其填满整个容器。

在 `.card-front` 类中，我们设置了一个白色背景，并添加了黑色边框，表示扑克牌的正面。

在 `.card-back` 类中，我们设置了扑克牌的背面图片，并使用 `background-size: cover;`，使其自适应容器大小。同时，我们使用 `transform: rotateY(180deg);`，将其翻转至背面朝上。

最后，我们在 HTML 代码中使用这些类，即可实现扑克牌翻转效果。