动画2详细解析

css 复制代码

/* 设置景深 */
        perspective: 1000px;

css 复制代码

 /* 设置3d效果 */
        transform-style: preserve-3d;

css 复制代码

 /* 设置旋转 */
        transform: rotateY(75deg);

css 复制代码

  /* 设置过渡 */
        transition: all 2s;

html 复制代码

 <style>
      body {
        /* 设置景深 */
        perspective: 1000px;
        /* 设置3d效果 */
        transform-style: preserve-3d;
      }
      .outer {
        width: 400px;
        height: 400px;
        background: blanchedalmond;
        margin: 50px auto;
        /* 设置景深 */
        perspective: 1000px;
        /* 设置3d效果 */
        transform-style: preserve-3d;
        /* 设置旋转 */
        transform: rotateY(75deg);
      }
      .box {
        width: 100px;
        height: 100px;
        margin: 5px;
        background-color: #bfa;
        /* 设置过渡 */
        transition: all 2s;
      }

      .box1 {
      }
      .outer:hover > .box1 {
        transform: translateZ(100px);
      }

      .box2 {
        background: red;
      }

      .box3 {
        background: green;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="box box1"></div>
      <div class="box box2"></div>
      <div class="box box3"></div>
    </div>
  </body>

css 复制代码

 /* 设置父元素3d效果 */
        perspective: 1000px;
        transform-style: preserve-3d;

html 复制代码

<style>
      body {
        /* 设置父元素3d效果 */
        perspective: 1000px;
        transform-style: preserve-3d;
      }
      .outer {
        width: 400px;
        height: 400px;
        border: 10px solid rgb(221, 166, 15);
        /* 设置父元素3d效果 */
        perspective: 1000px;
        transform-style: preserve-3d;
        transform: rotateX(75deg);
      }
      .box {
        width: 100px;
        height: 100px;
        margin: 5px;
        background-color: #bfa;
        transition: 1s linear;
      }
      .box2 {
        background: red;
      }

      .box3 {
        background: green;
      }
      .outer:hover > .box1 {
        /* transform: rotateZ(45deg); */
      }
      .outer:hover > .box2 {
        /* transform: rotateX(-45deg); */
      }
      .outer:hover > .box3 {
        transform: rotateY(45deg);
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="box box1">box1</div>
      <div class="box box2">box2</div>
      <div class="box box3">box3</div>
    </div>
  </body>

css 复制代码

 /* 容器：开启3D空间 */
      .card-container {
        width: 200px;
        height: 300px;
        margin: 50px;
        perspective: 1000px; /* 营造3D透视感 */
        display: inline-block;
      }

html 复制代码

<style>
      /* 容器：开启3D空间 */
      .card-container {
        width: 200px;
        height: 300px;
        margin: 50px;
        perspective: 1000px; /* 营造3D透视感 */
        display: inline-block;
      }

      /* 卡片：核心翻转元素 */
      .card {
        width: 100%;
        height: 100%;
        position: relative;
        transition: transform 1s;
        transform-style: preserve-3d; /* 保留3D效果 */
      }

      /* 鼠标悬停时翻转卡片 */
      .card-container:hover .card {
        transform: rotateY(180deg);
      }

      /* 卡片正面和背面 */
      .card-front,
      .card-back {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        border-radius: 10px;
      }

      .card-front {
        background: #42b983;
        color: white;
      }

      .card-back {
        background: #3498db;
        color: white;
        transform: rotateY(180deg); /* 背面先翻转180°，方便翻转后显示 */
      }

      /* 案例1：背面可见（默认） */
      .demo1 .card-front,
      .demo1 .card-back {
        backface-visibility: visible;
      }

      /* 案例2：背面隐藏（实用场景） */
      .demo2 .card-front,
      .demo2 .card-back {
        backface-visibility: hidden;
      }
    </style>
  </head>
  <body>
    <!-- 案例1：backface-visibility: visible（背面可见） -->
    <div class="card-container demo1">
      <div class="card">
        <div class="card-front">正面</div>
        <div class="card-back">背面</div>
      </div>
    </div>

    <!-- 案例2：backface-visibility: hidden（背面隐藏） -->
    <div class="card-container demo2">
      <div class="card">
        <div class="card-front">正面</div>
        <div class="card-back">背面</div>
      </div>
    </div>
  </body>