这个旋转的魔方我们必须先创建一个舞台，并且写上属性：
transform-style: preserve-3d; 1.属性perspective
这是景深，就是一个定义舞台和屏幕之间距离的属性
2.关于transform属性主要就是配合两个属性使用：
rotate()和translate()属性，一个是定义旋转的方向和角度，另一个是移动的方向，都是配合xyz三个轴实现
3.栅栏布局display:grid
就是可以在一个容器里面创建这样的额栅栏布局，比如我们在一个div里面创建一个两行三列的布局：
grid-template-columns: 105px 105px 105px;这个表示三列，每列的宽度是105px
grid-template-rows:85px 85px;这个表示两行，每行宽度是85px
grid-gap: 1.5rem;这个是每行每列之间的空隙是1.5rem，可以两个参数，一个是行距一个是列距
这个盒子可以利用弹性布局的居中：
justify-content: center;4.classList
表示一个标签的类名列表，基本的使用可以见classList
5.target 事件属性
javascript中可以在绑定事件(addEventListener)的时候使用event.target来返回发生事件的元素
6.transition属性
可以说是补间动画
使用：
transition: property duration timing-function delay;
| 值 | 描述 |
|---|---|
| transition-property | 指定CSS属性的name，transition效果 |
| transition-duration | transition效果需要指定多少秒或毫秒才能完成 |
| transition-timing-function | 指定transition效果的转速曲线 |
| transition-delay | 定义transition效果开始的时候 |
我们魔方相册里面我们把property 设置成transform：
transition: transform 3s cubic-bezier(0.165, 0.84, 0.44, 1);这样就是所有的旋转效果都可以实现动画效果了