[分享]css3折叠性

CSS3折叠性（Folding）是一种新的布局方式，它可以让元素在有限的空间内呈现出不同的状态，从而节省了空间，并且提高了用户体验。实现折叠性主要有两种方式：1. 使用CSS3的animation属性...

CSS3折叠性（Folding）是一种新的布局方式，它可以让元素在有限的空间内呈现出不同的状态，从而节省了空间，并且提高了用户体验。

实现折叠性主要有两种方式：

1. 使用CSS3的animation属性，通过旋转、上下移动等变换，让元素在不同状态之间切换。
<div class="folded">
  <p>折叠的内容</p>
</div>
<style>
  .folded {
    height: 50px;
    overflow: hidden;
    transition: height 0.5s ease-out;
  }
  .unfolded {
    height: auto;
  }
</style>
<script>
  var folded = document.querySelector('.folded');
  folded.addEventListener('click', function() {
    folded.classList.toggle('unfolded');
  });
</script> 

2. 使用CSS3的transform属性，对元素进行翻转、旋转等变换，呈现出折叠状态。
<div class="accordion">
  <h3 class="active">标题1</h3>
  <div class="content">
    <p>内容1</p>
  </div>
  <h3>标题2</h3>
  <div class="content">
    <p>内容2</p>
  </div>
</div>
<style>
  .accordion h3 {
    cursor: pointer;
    margin: 0;
    padding: 10px;
    background-color: #ccc;
  }
  .accordion .active {
    background-color: #aaa;
  }
  .accordion .content {
    height: 0;
    overflow: hidden;
    transition: height 0.5s ease-out;
    transform-origin: top;
  }
  .accordion .active + .content {
    height: auto;
  }
  .accordion .content {
    transform: rotateX(-90deg);
  }
  .accordion .active + .content {
    transform: rotateX(0deg);
  }
</style>
<script>
  var accordion = document.querySelector('.accordion');
  accordion.addEventListener('click', function(event) {
    if (event.target.tagName === 'H3') {
      event.target.classList.toggle('active');
    }
  });
</script> 

以上两种方式都需要结合CSS3的transition属性，实现平滑过渡的效果。