我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

大家好，我是小七月，今天为大家带来了拔头发的表情包。事情是这样的，当我朋友给我发了一个拔头发的表情时，我头皮一凉，当下决定自己也来画一个。

首先绘制两个小人，这个比较简单，主要用到的boder-raduis属性和border熟悉，来绘制小人的脑袋和身体。然后利用绝对定位将小人的身体拼凑起来就大功告成了。

今天主要的重点在于动画和dom元素的位置变幻。我们先来说dom元素的变换。

`transform`

CSS transform 属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改 CSS 视觉格式化模型的坐标空间来实现的。(解释来自MDN)

警告： 只能转换由盒模型定位的元素。根据经验，如果元素具有display: block，则由盒模型定位元素。 transform后面直接跟转换功能的函数，如果有多重转换，直接以空格分割。组合变幻是由右向左生效的。例：

transform: rotate(10deg);
transform: translate(17px,20px);
/* Multiple function values */
transform: translateX(10px) rotate(10deg) translateY(5px);

`rotate`

定义一个旋转属性，将元素在不变形的情况下旋转到不动点周围,若不动点没有被transform-origin指定的话，默认为元素的中心点。移动量由指定角度定义(18deg);如果为正值，则运动将为顺时针（向右转），如果为负值，则为逆时针（向左转）。

rotate(45deg) //向右转45度
rotate(-45deg)// 向左转45度

`rotate3d`

rotate3d() 这个 CSS 函数定义一个 3D 旋转功能，该旋转使元素能够绕固定轴移动而不变形。其中移动量由指定角度定义；如果为正值，则运动将为顺时针，如果为负值，则为逆时针。（可以用来做元素绕一个元素旋转，如绘制地球绕太阳公转）

在三维空间中，旋转有三个自由度，各表示某条旋转轴。旋转轴由 [x，y，z] 向量定义，且过原点（由 transform-origin确定）。如果向量没有标准化，即它的三个坐标的平方之和不是 1，它将在内部被标准化。不可标准化的向量，如空向量 [0,0,0]，将导致旋转不被应用，但不会影响整个 CSS 属性。

备注： 相对于平面上的旋转，三维旋转的组成通常不是可交换位置顺序的，这意味着旋转的应用顺序是至关重要的。

rotate3d(x, y, z, a)

x描述旋转轴向量的 x 坐标。
y描述旋转轴向量的 y 坐标。
z描述旋转轴向量的 z 坐标。
a代表旋转的角度。正角度表示顺时针旋转，负角度表示逆时针旋转。

[a,0,0]表示绕着水平轴旋转，简写形式为rotateX。[0,b,0]表示绕着垂直轴旋转，简写形式为rotateY。[0,0,c]表示在z轴旋转，简写形式为rotateZ

`scale`

scale() CSS 函数可改变元素的大小。它可以增大或减小元素的大小，并且缩放量由矢量定义，并且它可以使在一个方向上比另一个方向更多。

当超出 [-1, 1]范围外时，缩放将在坐标方向上放大元素；当在该范围内时，它在该方向收缩元素。当等于 1 时，它什么也不做，当它为负时，它执行点反射和大小修改。

sacle(x,y) 或 scale(x)

x 表示水平方向缩放倍数。1表示不变，>1 表示水平方向放大x倍数。 y 表示垂直方向缩放倍数。1表示不变，>1 表示水平方向放大y倍数。若只传一个值，那么y = x;等比放大或者缩小。

`translate`

函数用于移动元素在平面上的位置。元素向左右或者向上下移动量。

translate(20px,-45px) // 向右移动20px,向上移动-45px

transY(20px)是tranlate(0,20px)简写，tranlateX(20px)是tanslate(20px,0)的简写。

应用：(实现水平垂直居中)

div {
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%)
}

`transform-origin`

用于改变元素的原点，transform-origin属性可以使用一个，两个或三个值来指定，其中每个值都表示一个偏移量。

如果定义了两个或更多值并且没有值的关键字，或者唯一使用的关键字是center，则第一个值表示水平偏移量，第二个值表示垂直偏移量。

一个值：
- 必须是<length>,<percentage>，或 left, center, right, top, bottom关键字中的一个。
两个值：
- 其中一个必须是<length , <percentage> 或 left, center, right关键字中的一个。
- 另一个必须是<length>, <percentage> 或 top, center, bottom关键字中的一个。
三个值：
- 前两个值和只有两个值时的用法相同。
- 第三个值必须是<length>。它始终代表 Z 轴偏移量。

动画

css实现动画一般有两种方式，一种使用transition属性，一种利用animation属性。

transition动画
- transition:[属性名称或者all] [属性变化完成时间] [动画执行的速度如linear匀速变化等] [动画延迟时间]

// 单个属性变化时的动画
transition: margin-right 2s ease-in-out .5s;

// 多个属性执行动画
transition: margin-right 2s, color 1s;

主要用于简单的动画。

animation动画
- animation:[动画名称] [动画持续时间] [动画执行的速度如linear匀速变化等] [动画延迟时间] [动画执行次数]

此处用来绘制的是拔头发的动画。

.hand {
      animation: touch 1s linear infinite;     
    }
    @keyframes touch {
      0% {
        transform: rotate(0deg);
      }
      25% {
        transform: rotate(6deg);
      }
      50% {
        transform: rotate(0);
      }
      100% {
        transform: rotate(-6deg);
      }
    }
  }

来绘制表情包啊，拔头发的那种～

transform

rotate

rotate3d

scale

translate

transform-origin

动画