css 点击实现内容正反面翻转效果

场景

在实现小模块的tab标签页切换时，可以添加内容翻转动效，增加趣味性及视觉效果。这种点击翻转动画通常用于卡片类的展示，以下为卡片翻转示例。

实现

通过css的一些属性：perspective、backface-visibility、transform等，实现内容的翻转隐藏和旋转动效。

xml 复制代码

<template>
  <div :class="['flip-layout', isBack && 'active']">
    <div class="flip-panel">
      <!-- 正面 -->
      <div class="flip-container front">
        <slot></slot>
      </div>
      <!-- 背面 -->
      <div class="flip-container back">
        <slot name="back"></slot>
      </div>
    </div>
  </div>
</template>

xml 复制代码

<style lang="scss" scoped>
.flip-layout{
  width: 100%;
  height: 100%;
  perspective: 3000px;
  overflow: hidden;
  &.active{
    .flip-panel{
      transform: rotateY(180deg); // 点击时翻转正反面
    }
  }
  .flip-panel{
    width: 100%;
    height: 100%;
    transition: all 1s ease; // 添加翻转过渡效果
    transform-style: preserve-3d; // 子元素将保留其 3D 位置
    .flip-container{
      width: 100%;
      height: 100%;
      position: absolute; // 让背面和正面重叠
      left: 0;
      top: 0;
      // 背面
      &.back{
        backface-visibility: hidden; // 背对屏幕时隐藏
        transform: rotateY(180deg); // 子元素内容先旋转至背面
      }
    }
    .front {
      backface-visibility: hidden; // 背对屏幕时隐藏
      z-index: 10;
    }
  }
}

引入组件后直接使用

ruby 复制代码

<flipPanel :is-back="isBackSide">
  <template #default>
     <div class="front-wrap" @click="isBackSide = !isBackSide">正面内容</div>
  </template>
  <template #back>
    <div class="back-wrap" @click="isBackSide = !isBackSide">反面内容</div>
  </template>
</flipPanel>

延伸

1. transition: all 1s ease 1s

代表的含义：

transiion-propery：执行变换的属性；
transition-duration：变换延续的时间；
transitiontiming-function：在延续时间段，变换的速率变化；
transition-delay：变换延迟时间

2. perspective 属性

perspective 属性定义 3D 元素距视图的距离，以像素计。此属性允许您更改查看 3D 元素的视角。

当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

perspective 可以给元素设置视距，增加其3D效果，数值越大透视效果越弱。通常写在父级元素上。 perspective 加给父级与加给自身的区别：blog.csdn.net/aexwx/artic...

3. transform-style 属性

transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。

flat 子元素将不保留其 3D 位置。(默认)
preserve-3d 子元素将保留其 3D 位置。

4. backface-visibility 属性

backface-visibility: visible|hidden; 定义当元素背面向屏幕时是否可见。如果在旋转元素不希望看到其背面时，该属性很有用。