[分享]css3折纸教学

CSS3折纸效果是前端开发中一种好玩且有趣的交互效果，可以用于实现卡片翻转、侧边栏展开等效果。以下是一个简单的CSS3折纸教学示例： .paper { width: 200px; height: 20...

CSS3折纸效果是前端开发中一种好玩且有趣的交互效果，可以用于实现卡片翻转、侧边栏展开等效果。以下是一个简单的CSS3折纸教学示例：

 .paper {
      width: 200px;
      height: 200px;
      position: relative;
      perspective: 1000px;
    }
    .paper .front, .paper .back {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      transition: transform .5s;
    }
    .paper .front {
      background-color: #f1c40f;
      transform-origin: center left;
    }
    .paper .back {
      background-color: #2ecc71;
      transform-origin: center right;
      transform: rotateY(-180deg);
    }
    .paper.open .front {
      transform: rotateY(180deg);
    }
    .paper.open .back {
      transform: rotateY(0);
    } 

首先，我们需要一个容器，用来包裹纸片的前后两个面。在这个例子中，我们给容器设置了宽度和高度，并且通过perspective属性创建了一个3D透视效果。

接下来，我们为纸片的正反两面设置CSS样式，并用transition属性让它们发生动画效果。

注意到我们添加了一个.open类，这个类可以用JavaScript实现添加和删除，当纸片打开时，它会显示出反面。

现在，我们可以给容器添加一个click事件来触发纸片翻转：

 var paper = document.querySelector('.paper');
    paper.addEventListener('click', function() {
      paper.classList.toggle('open');
    }); 

通过这些简单的代码，我们就可以实现一个基本的CSS3折纸效果。这不仅是一种好玩的交互效果，还可以用于丰富网站的UI设计。