backface-visibility——卡片正反面翻转

Published by 雪夜不下雪 on 共 656 个字

关于卡牌翻转，很久以前写过一个，但是没有记录，所以今天碰到同种需求又摸索了会儿。

我的想法是，一个 div 里面两张图片，一个正面，一个反面。

<div class="container">
  <image class="cover-image" src="xxx.png" />
  <image class="back-image" src="xxx.png" />
</div>
/* 样式 */
.container {
  width: 204rpx;
  height: 279rpx;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  transform-style: preserve-3d;
  tranform: rotateY(0deg);
  transition: all 2s;
}

.cover-image,
.back-image {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.cover-image {
  transform: rotateY(180deg);
  transform-origin: center;
}

.back-image {
  backface-visibility: hidden;
}

然后，在 .container 元素上加一个 transform: rotate(180deg) 属性就可以了。

注意事项

  • baceface-visibility 生效的前提是：翻转的元素需要设置 transform-style: preserve-3d
  • 小程序有 bug