沫言|手风琴特效这么飒，你能用 JavaScript 实现吗？( 二 ) 实验介绍手风琴效果一直是比较流行的页

预览效果：
代码重点讲解之—— transform-origin：
transform-origin 是变形原点，原点就是元素绕着旋转或变形的点，该属性只有在设置了 transform 属性的时候才起作用，如果在不设置的情况下，元素的基点默认的是其中心位置。
语法：
transform-origin: x-axis y-axis z-axis;

x-axis：定义视图被置于 X 轴的何处。
y-axis：定义视图被置于 Y 轴的何处。
z-axis：定义视图被置于 Z 轴的何处。

模块样式修改 index.html ，在第一个 .el 下加入以下代码：
Section 1Whatever11分析一下 .el 的结构，每个 .el 包含两部分，一部分是包含了图片、文字以及按钮（el__overflow），它的高度需要继承自父级（.el）的百分百，另一部分是底部的数字部分（el__index）。
el__overflow 结构解释el__overflow 中包含 el__inner ， el__inner 是主要内容，包含三部分：

主体图片和遮罩层部分（el__bg），其中伪元素 el__bg:before 是图片部分， el__bg:after 是遮罩层部分。
图片中间文字内容部分（el__preview-cont）。
图片放大后的标题和关闭按钮部分（el__content）。

完整学完本课程后，将习得以下知识点：

视口单位
绝对定位与相对定位
transform 属性
伪元素 before 和 after
通过 CSS3 完成动画
JavaScript 添加类

前端特效需要很多 CSS 操作，课程中的动画效果有一些抽象需要大家多思考才能理解。本课程是 JavaScript 的简单课，所以对于 JavaScript 部分是比较简单且容易理解的，希望大家多多动手，不要只进行简单的复制粘贴，才能更好的学习本课程。
【沫言|手风琴特效这么飒，你能用 JavaScript 实现吗？】快点击链接，进入课程学习吧！