transform-style: preserve-3d

朋友对我图省事用的 animate.css flipInX 效果不满意，软磨硬泡非要我改成 wordle 原版那种整个翻过来的。于是我就想办法实现了一把，比想象的稍微复杂一些，难点在于我不知道 transform-style: preserve-3d 这个属性。没有这个属性，正反两个图层就被压在一个平面里，怎么翻转都是上面那个图层显示出来。

我用来调试的代码实现请点这里，为了方便调试，我这次没用 codepen，用的 Vue SFC Playground，效果挺好，尤其是适合不熟悉属性时一边试一边写。不知道 codepen 是否支持这种玩法。

实现的代码与之类似：

<template lang="pug">
.game-item
  .face G
  .face G
</template>

<style lang="stylus">
.game-item
  aspect-ratio 1
  position relative
  // 这个样式很重要，没有它就没有背面一说
  transform-style: preserve-3d;
  user-select none

.face
  position absolute
  top 0
  left 0
  width 100%
  height 100%
  display flex
  justify-content center
  align-items center

  &:first-child
    // 把第一层稍微提高一点点，不能太多，不然旋转效果不好看
    transform translateZ(0.1px)

  &:last-child
    // 背面提前翻转 180 度，这样转过来才是对的
    transform rotateX(180deg)

@keyframes flip
  from
    transform: perspective(400px) rotate3d(1, 0, 0, 0)

  to
    transform: perspective(400px) rotate3d(1, 0, 0, 180deg)

.flip
  animation-name: flip
</style>

这种效果平时还是找时间写上一两次，CSS 属性是知识性内容，没办法凭经验推出来，平时得注意积累。

标签： transform-style: preserve-3d

代码分享：翻转小动画