https://github.com/threepointone/claw
css transforms without the heartache
https://github.com/threepointone/claw
Last synced: 2 months ago
JSON representation
css transforms without the heartache
- Host: GitHub
- URL: https://github.com/threepointone/claw
- Owner: threepointone
- Created: 2013-01-31T23:40:51.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2013-11-09T22:00:17.000Z (over 11 years ago)
- Last Synced: 2025-01-25T08:11:39.903Z (4 months ago)
- Language: JavaScript
- Size: 145 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
- Changelog: History.md
Awesome Lists containing this project
README
# claw
simple css transforms via js
## Why?
The problem with css transforms, is that they're all bunched up together into one css property, like so -
```css
.box{
transform: rotate(30deg) scale(0.2) translateX(20px) translateY(30px);
}
```
this makes working with them rather painful, since you have to construct the whole string every time, and remember all the previous values of transforms you don't want to change. there exist solutions where you construct objects representing every element you want to control, but those are clumsy as well, and indirection at best.
claw gets around this by simply writing value to the element itself, and retrieving it later when needed to construct the string. hacky? sure. Slightly inefficient? Yup. works? totally.
## API
```js
var claw = require('claw');
var el = document.getElementById('xyz');
claw(el, {
rotate: '30deg'
});
claw(el, {
scale: 2,
matrix: [0.866, 0.5, -0.5, 0.866, 0, 0]
});
// notice that the rotation is preserved. yay!
// the function itself returns a curried version of itself for further chaining
claw(el)({rotate:'30deg'})({skewX:'10px'})
// boom.
```
## License
MIT