<commit_before># Transform2D
A simple way to implement CSS3 2D transform. Works in CSS2 as well.  
Available transformation includes: **rotation, scale, translate**.

Each transformation is considered as an independent event, which mean multiple transformations will not affect each other. The transformation will not be affect by the applying order.

**Margin**  is used to handle offset in CSS2. DO NOT change them after applying transform in this case.

![preview](https://raw.githubusercontent.com/Rendxx/Transform2D/master/preview.png "Preview")

*Sample: [http://www.rendxx.com/Lib/Sample/7](http://www.rendxx.com/Lib/Sample/7 "Sample")*  
*Download: [Transform 2D v3.2](https://github.com/Rendxx/Transform2D/releases/tag/3.2 "Download")*

# API
[API Document][https://github.com/Rendxx/Transform2D/blob/master/API%20Document.md]

# Dependency
- [jQuery][]

# Code Sample
JavaScript:
```javascript
$("#sample").rotate("30");  // set the rotation by 30 degree clockwise
$("#sample").rotate("-=10"); // rotate -10 degree clockwise, now the rotation is 20 degree
$("#sample").scale(["-=0.1",1.1]); // scale X-axis by 1-0.1 = 0.9, scale Y-axis by 1.1
$("#sample").transform2D({ // move the element 30 pixel to right
     translateX: 30
});
var data = $("#sample").transform2D();
// data = {
//     rotate: 20, 
//     scaleX: 0.8999996188071415, 
//     scaleY: 1.0999981767639435, 
//     translateX: 30, 
//     translateY: 0
//     }
```

# Compatibility<commit_msg>fix typo<commit_after># Transform2D
A simple way to implement CSS3 2D transform. Works in CSS2 as well.  
Available transformation includes: **rotation, scale, translate**.

Each transformation is considered as an independent event, which mean multiple transformations will not affect each other. The transformation will not be affect by the applying order.

**Margin**  is used to handle offset in CSS2. DO NOT change them after applying transform in this case.

![preview](https://raw.githubusercontent.com/Rendxx/Transform2D/master/preview.png "Preview")

*Sample: [http://www.rendxx.com/Lib/Sample/7](http://www.rendxx.com/Lib/Sample/7 "Sample")*  
*Download: [Transform 2D v3.2](https://github.com/Rendxx/Transform2D/releases/tag/3.2 "Download")*

# API
[API Document](https://github.com/Rendxx/Transform2D/blob/master/API%20Document.md)

# Dependency
- [jQuery][]

# Code Sample
JavaScript:
```javascript
$("#sample").rotate("30");  // set the rotation by 30 degree clockwise
$("#sample").rotate("-=10"); // rotate -10 degree clockwise, now the rotation is 20 degree
$("#sample").scale(["-=0.1",1.1]); // scale X-axis by 1-0.1 = 0.9, scale Y-axis by 1.1
$("#sample").transform2D({ // move the element 30 pixel to right
     translateX: 30
});
var data = $("#sample").transform2D();
// data = {
//     rotate: 20, 
//     scaleX: 0.8999996188071415, 
//     scaleY: 1.0999981767639435, 
//     translateX: 30, 
//     translateY: 0
//     }
```

# Compatibility
{'fraction_non_alphanumeric': 0.15730337078651685, 'fraction_numerical': 0.05652025876744978, 'mean_word_length': 3.9130434782608696, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 6, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6658770', 'n_tokens_mistral': 1019, 'n_tokens_neox': 928, 'n_words': 278}