正方体的简单动画实现

---

首先，作为浅薄的前端开发者，第一次，所作是分享自己的第一个小成果，务必请大家多多包涵。——逆战班第一次分享
此动画的必要知识点

transition 属性是一个简写属性，用于设置四个过渡属性：

transition-property:规定设置过渡效果的 CSS 属性的名称。
transition-duration:规定完成过渡效果需要多少秒或毫秒。
transition-timing-function:规定速度效果的速度曲线。
transition-delay:定义过渡效果何时开始。

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

1. translate : 位移

   transform:translate(100px,100px); : 两个值 分别对应 x 和 y。
   transform:translateX(100px);
   transform:translateY(100px);
   transform:translateZ(100px); ( 3d )
   百分比时，移动本身元素的百分值

2. scale : 缩放

   transform:scale(num) num是一个比例值，正常比例是1。当为负值则进行翻转
   transform:scale(num1 , num2) 两个值 分别对应 width和 height
   transform:scaleX()
   transform:scaleY()
   transform:scaleZ() ( 3d )

3. rotate : 旋转

   transform:rotate(num) num是旋转的角度 30deg<