CSS3 实现卡片翻牌效果_Css

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

在这里插入图片描述

需求

实现

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

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);
      }
    }
  }
}