css 3d折叠效果

CSS 3D折叠效果是一种非常酷炫的网页效果，可以为你的网页增添一份艺术感。以下是一个简单的示例。

  /* 容器样式 */
  .container {
    perspective: 1000px; /* 透视距离 */
  }
  
  /* 面板样式 */
  .panel {
    transform-style: preserve-3d; /* 3D变换 */
    transition: transform .8s; /* 动画过渡 */
    position: relative;
    height: 300px;
    width: 400px;
    margin: 0 auto;
  }
  
  /* 正面样式 */
  .front {
    position: absolute;
    background-color: #23a0cc;
    height: 100%;
    width: 100%;
  }
  
  /* 背面样式 */
  .back {
    transform: rotateY(180deg); /* 180度翻转到背面 */
    position: absolute;
    background-color: #b3d3e2;
    height: 100%;
    width: 100%;
  }
  
  /* 点击事件 */
  .panel:hover {
    transform: rotateY(180deg); /* 点击翻转180度 */
  }

在上面的代码中，我们通过设置容器的perspective属性来设置透视距离。利用transform-style属性我们将.panel的所有子元素都应用3D变换。我们为两个面板分别设置了.front和.back样式，并通过transform:rotateY()属性来实现翻转效果。

通过设置hover事件，当我们鼠标移到面板上时，会发生一次翻转180度的动画过渡。这是一个非常棒的交互效果，可以为我们的网页增添一份艺术感。