以前要实现图片的旋转或翻转，只能用ie的滤镜来实现，虽然canvas也实现，但ie不支持而且不是html标准。
css3出来后，终于可以用标准的transform来实现变换，而canvas也已成为html5标准的一部分。
css3和html5使web变得越来越强大，各种新奇的技术正等待我们发掘。
本程序分别通过滤镜(ie)、ccs3和canvas来实现图片的旋转、缩放和翻转变换效果，可以用作图片查看器。
有如下特色：
1，用滤镜、ccs3和canvas实现相同的变换效果；
2，可任意角度旋转；
3，可任意角度翻转；
4，可扩展滚轮缩放；
5，可扩展拖动旋转。
兼容：ie6/7/8, firefox 3.6.8, opera 10.6, safari 5.0.1, chrome 5.0

效果预览

程序说明

【基本原理】

变换主要是利用css3的变换样式transform的matrix方法来实现。
ie不支持css3，但有Matrix滤镜也能实现类似的效果。
程序还用canvas，通过画图实现相同的效果。

【模式设置】

程序包含三种模式：css3、filter和canvas，程序初始化时，会根据自定义模式进行模式设置。
各个模式相关的属性和方法都存放在ImageTrans.modes中。
每个模式对象都包含support属性，表示当前浏览器是否支持该模式，还有几个方法：
init：初始化执行程序
load：加载图片执行程序
show：变换显示程序
dispose：销毁程序

使用这样的格式来自定义模式："css3|filter|canvas"，判断过程主要在_initMode程序中：

代码

程序会按顺序逐个判断，当浏览器支持该模式时就会用该模式的方法设置程序函数。
再用_support记录浏览器是否支持指定的模式。

如果浏览器支持，才执行_initContainer容器初始化程序和_init模式初始化程序。

【加载图片】

完成初始化设置后，再执行load方法加载图片。
在load方法中，主要对图片进行设置：

最后设置src加载图片。

图片加载成功后，会执行_LOAD程序，在里面会执行_load加载程序和reset方法。
在reset中，会重置变换参数，并执行_show模式画图程序：

这时，图片会以初始状态显示。

【图片变换】

图片加载完成后，就可以对图片进行变换。

各种变换方法保存在ImageTrans.transforms中，包括旋转、垂直翻转、水平翻转、缩放等。
变换结果是通过_y垂直变换参数、_x水平变换参数和_radian旋转变换参数计算得到的。
变换方法就是用来修改这些参数的方法。

一般的翻转是通过把_y或_x取反来实现的，是以图片本身为坐标的翻转。
但用户的习惯是按浏览器坐标来翻转的，当图片先旋转变换坐标后再翻转，就不符合用户习惯了。
为了能按视觉习惯坐标来翻转，程序使用的方法是先旋转再翻转来实现。
例如vertical垂直翻转是图片旋转180度，再进行一般的水平翻转：

而horizontal水平翻转也类似：

实际也是利用了一些坐标变换原理。

rotate旋转是以弧度为单位的，直接修改_radian参数。
rotatebydegress是以角度为单位的旋转，其实是用degress * Math.PI/180公式把角度转换成弧度。
left向左转90度是在原有弧度减Math.PI/2（即90度），而right向右转90度是加Math.PI/2。

scale缩放就是根据缩放比率分别对_y和_x进行修改。
程序定义了一个getZoom修正缩放比率函数：

只有当比率不会导致结果是反值的情况才会返回正确的比率。
这里主要是保证缩到最小时不会因为比率太大得到反值，导致图片翻转并放大。
当垂直和水平比率都不是0，才会对参数进行修改：

这样可以保证水平和垂直缩放同时进行，保持图片比例。
要注意zoomin放大时要保证缩放比率为正数，zoomout缩小就要负数。

这些方法会在模式设置中扩展到程序中：

在执行完变换方法后，就会执行_show来显示变换。

【transform】

变换换流程介绍完，就进入主题，介绍三个变换方法了。
先看看css3的transform，它包含以下变换方法：
matrix：矩阵变形，使用它就可以做到后面所有的变换，但使用相对麻烦；
translate/translateX/translateY：坐标变换，就是移动坐标的意思；
scale/scaleX/scaleY：缩放变换，放大缩小，取负值可以做翻转；
rotate：旋转变换，根据角度旋转；
skew/skewX/skewY：拉扯变换，就是上下或左右向不同的方向扯开的效果。
更详细的介绍请看w3c的CSS 2D Transforms或者MDC的-moz-transform。

要进行变换，首先要看看浏览器是否支持：

代码

由于程序运行时文档可能还没载入，所以要手动创建一个元素来测试。
虽然w3c标准使用的是transform，但现阶段各浏览器还是需要各自的前缀。
当元素样式包含其中一个变换样式，说明该浏览器支持，再用css3Transform记录样式名字。

在css3模式的init程序中，会执行initImg方法对图片进行设置：

主要是设置绝对定位、隐藏和重置样式，最后插入容器。
ps：图片对象虽然是用new Image()创建的，但也可以当作img元素来操作。

在load加载程序中，再对图片样式进行设置：

设置left和top使图片在容器里居中，并显示图片。

关键的show程序，用来进行图片变换，这里用的是matrix变换。
matrix有6个参数，前4个是矩阵变换参数，后两个是坐标变换参数。
要根据弧度旋转，可以这样设置矩阵：
cos(a) -sin(a)
sin(a)  cos(a)
而缩放变换就这样设置：
sx 0
0  sy
旋转同时缩放，矩阵相乘得到：
cos(a)*sx -sin(a)*sy
sin(a)*sx  cos(a)*sy
关于Matrix矩阵变换可以看w3c的。

getMatrix函数就是通过以上矩阵计算matrix参数：

在show程序里面，用getMatrix得到参数后，就可以设置样式：

在实际使用中，使用matrix可能要设置一堆可读性很差的数字，所以还是推荐用其他变换方法。

【Matrix滤镜】