这个旋转的魔方我们必须先创建一个舞台,并且写上属性:
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);
这样就是所有的旋转效果都可以实现动画效果了