CSS3 实现卡片翻牌效果

Vue3.0 + CSS3 实现卡片翻牌效果
昨天做了个大屏，里面有个数据统计展示的，如图

效果图

需求

根据推送过来的实时数据动态变化
有动画效果，翻牌

实现

1. 封装组件时使用v-model数据双向绑定，css3实现动画翻牌效果；
2. 动画模板用两张卡片，其中一张设置成反面，c3旋转180deg，用来切换显示；
3. 卡片设置反面不可见

tsx

import { computed, defineComponent } from "vue";
import "./index.less";
interface Props {
  modelValue?: string
}
export default defineComponent({
  emits: ["update:modelValue"],
  props: {
    modelValue: {
      type: String,
    }
  },
  setup(props: Props, {emit}) {
    let showStr = computed<string>({
      get: () => {
        return props.modelValue as string
      },
      set: val => {
        emit("update:modelValue", val);
      }
    });
    const Mouseenter = () => {
      showStr.value = (Number(showStr.value) + 1).toString();
    }
    return () => (
      <div class="count-cell-wrap" onMouseenter={Mouseenter}>
        {
          showStr.value.split("").map((v, i) => {
            return (
              <div class="count-cell">
                <span class={(i == showStr.value.length - 1) ? "span-last" : ""}>{v}</span>
                <span class="span-last-old" v-show={i == showStr.value.length - 1}>{v}</span>
              </div>
            )
          })
        }
      </div>
    )
  }
})

css

.count-cell-wrap {
  margin-top: 10;
  cursor: pointer;
  &:hover .span-last {
    transition: all .5s;
    transform: rotateX(180deg) !important;
  }
  &:hover .span-last-old {
    transition: all .5s;
    transform: rotateX(0deg) !important;
  }
  .count-cell {
    display: inline-block;
    width: 37px;
    height: 62px;
    line-height: 62px;
    border-radius: 5px;
    text-align: center;
    margin-right: 4px;
    position: relative;
    background-color: transparent;
    border: 1px solid #ccc;
    span {
      font-size: 48px;
      &.span-last, &.span-last-old {
        display: inline-block;
        transform-style: preserve-3d;
        backface-visibility: hidden;
      }
      &.span-last-old {
        position: absolute;
        top: 0;
        left: 4px;
        transform: rotateX(180deg);
      }
    }
  }
}