由上述可以看出，图片的左上角坐标是(x:0,y:0,z:0);而我们要旋转一个图片，一般不希望在左上角做为旋转点，最多的情况下，就是以图片的中心点为旋转点(x:50%,y:50%,z:0) z坐标是指向我们的坐标，就像css里的z-index一样，我们应该把它设为0，即使你设为任何一个数字，你的视角差也感不到任何不同，因为，图片的z轴是垂直我们视线的，故一般设置为0。
就像下面如图所示，可能是我们希望的旋转效果：
不好意思呀，用QQ绘图工具绘制，可能效果不太好，但是大致的表达了这种示意图，
上图描述了，由图片A由中心点，旋转90度后的效果，那么如何初始化，让图片的原点由(x:0,y:0,z:0)更换为(x:50%,y:50%,z:0)呢？回过头来看下官网教程的wx.createAnimation(OBJECT)方法
其中属性transformOrigin 已说明，默认为图片的中心点，可能是作者的初衷也这么认为的，旋转应该以”元素“的中心点来操作应用比较多点，这是合情可理的
至此，我们旋转一个图片得了到大致的思路。其它的以X轴，Y轴，Z轴旋转与些类似，不在累述。
animation样式：
如何让一个元素从一个位置从A点移到B点呢？可能通过上述的样式属性在改变”元素“的top bottom left right 达到效果，
当然也可以通过其它动画方法来改变，如偏移 translate(x,y,z)。
通过top bottom left right 样式属性来实现动画，前提是，这个”元素“一定是相对定位或者绝对定位的，不然是不出效果的，这和写css里的position:absolute相同的原理。
如果要让一个元素或图片从A点平移至B点，就像下图所以示
假如初始A坐标为(x:10px,y:0px,z:0px)移至B点坐标(x:120px,y:0px,z:0px),那样我们只需改变元素的left或者right即可，
同理，可以用bottom,top来改变y坐标。
好了，到此为止，我们项目的所需动画可能要用到的效果都基本上有了思路。那么下面我们就来实现它。
首先，我们在”出发城市'与"到达城市"以及"旋转图片"定义如下：
对应的wxml界面：
然后，我们为注意到在index.wxss（如下图）里给了绝对定位，目的就是想用left或right来动画交换城市
这里注意一点，animationsSourceCity初始化的时候，css里用了left, 动画时，必须用它的left来"位移"，而不是right
不然会看不到效果，这点，在玩css3动画的时候，就遇到过。同理，下面的animationsDestCity只能用right来"位移"。
为什么有的朋友会想在初始化的时候用left可动画的时候想right的呢？可能考虑到元素的准确的定位原因，毕竟，精确的定位不是一件很容易的事情。 为什么这么说呢？因为考虑到app在其它屏上显示。
