魔方照片墙总结

这个旋转的魔方我们必须先创建一个舞台，并且写上属性：

 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);

这样就是所有的旋转效果都可以实现动画效果了