css3-2D

可替换的模型名称

2D模型全名称：

live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko
live2d-widget-model-z16

css3的2d转化，我所知的有5种。

translate平移
rotate旋转
scale缩放
skew拉伸
matrix组合技
因为是css属性，所以必然，2d转化的设置在style中设置基本格式，transform：XXX；以选择哪种转化，还可以设置transition：time；以设置转化时间（不过不能设置在初始状态下，否则无效）

下面按标号进行介绍：

1.translate

有2种设置方式，如transform：translate（a，b）a为x轴上偏移量，b为y轴上偏移量 （网页原点在最左上角，x轴正方向向正右，y轴正方向向正下）。

或translate（a）则a为x，y轴上偏移量，还可以使用translateX，translateY进行指定方向偏移。

2.rotate

transform：rotate（a）a为旋转角度，a为正向顺时针旋转，为负逆时针。

rotate可以设置transform-origin以设置旋转点的位置。

rotateX和rotateY有点意思，他们是关于x，y轴旋转。

3.sclae

transform：scale（a，b）将元素沿x，y方向拉伸a，b倍，transform：scale（a）与transform：scale（a，a）一致

4.skew

transform：skew（a，b）拉着元素最右下角向右和下拉伸a，b角度。我试着设置了一下transform-origin但是效果仅是变化后元素会突然平移，效果很差，这个特性一般应该没用。