JCT

==> javascript : css3 transform/transition

一款方便js操作css3 transform、transition的工具. 正在开发。 框架整体结构类似jquery，能够快速上手。全局就一个对象JCT，也可以用$代替。

---

API

$等同于JCT。当页面中引用jquery时，使用JCT。

$(selector)

描述：

通过设置css选择器作为参数，可以得到css选择器选中的标签集合。

参数：

selector => string , 必选

返回：

Object : JCT实例对象 传入一个css选择器字符串，得到一个JCT对象，通过JCT对象能够对dom进行各种操作。

示例1-1

var $dom = $("body");      
alert($dom.length); // 1       
alert($dom[0].tagName); // "BODY"

.rotateX( deg )

描述：

获取第一个标签的rotateX值，或设置所有标签的rotateX值

参数：

deg => string || number , 可选 要旋转的角度值。可以为数字、字符串，如：.rotateX(30) , .rotateX("30") , .rotateX("30deg") 大部分关于transform的方法都可以如此使用参数，包含：translate , translateX , translateY , translateZ , translate3d , scale , scaleX , scaleY , skew , skewX , skewY , rotateY , rotateZ , rotate 。不再重复

返回：

1. 没有传入参数：

   获取第一个标签的rotateX值，类型为字符串，示例："30deg"。

   __注1：__所有得到transform值的方法，包括scale系列,rotate系列,translate系列,skew系列，都是从标签的内联样式（即div.style.cssText）中分析而得，有可能不是标签最终呈现的样子。因为通过getComputedStyle获取到的是最终的矩阵，无法保证准确的倒推出设置的rotate等属性。采用style.cssText分析属于折中，通过JCT统一的接口调用，基本可以避免字符串分析的缺点。

   __注2：__这里还存在一个悖论问题，css是允许开发者在同一条transform中设置多条rotate等同类属性的，并且是类似叠加的关系，譬如可以写：transform:rotate(30deg) translate(0,0) rotate(50deg)，最后显示的实际上是30+50=80deg，但是这种写法存在诸多问题，譬如开发者意图不可测，前端开发师这么写到底是效果必须要求这么写，还是手误写错了？接下来开发者假设要得到rotate值，他期望的是30？50？80？不得而知。因此这里建立一条规则，负责大部分开发环境下的transform设置和获取需求，详见注3

   __注3：_a.不要为相同的属性前后设置多个（如注2,）；b.当获取某个属性的值时，JCT会选择获取第一个出现的值，譬如transform:rotate(30deg) translate(0,0) rotate(50deg)使用JCT获取，会得到"30deg"；c.当设置某个属性的值时，JCT会先检查当前是否有相同属性设置，如果有则替换为新的值，如果没有则会查找相应的相关属性或合写属性，进行替换，如果前两者都没有，JCT会在最后字符串最后插入设置。譬如style.cssText中设置为transform:translateX(30px)，使用JCT设置translateX=40，JCT首先找到了已经设置有translateX，则会将其替换为：transform:translateX(40px)，假设使用JCT设置的是translate=50，在字符串中没有显示的设置translate，但我们都知道css中translate有两个参数，只写一个意味着设置translateX，JCT就会将字符串修改为：transform:translateX(50px)，最后一种情况：假设设置rotate=40deg，JCT发现相同属性和相关属性都没有显示的出现，就会在最后插入，新的字符串为：transform:translateX(30px) rotate(40deg)。

2. 传入正确的参数： 返回this对象，可以链式操作，示例： $('body').rotateX("30deg").rotateX("40deg");