https://github.com/praneshr/transform-parser
Converts css transform string to an object and vice versa.
https://github.com/praneshr/transform-parser
css-transforms javascript parser rollup-js stringifier typescript
Last synced: 9 months ago
JSON representation
Converts css transform string to an object and vice versa.
- Host: GitHub
- URL: https://github.com/praneshr/transform-parser
- Owner: praneshr
- License: mit
- Created: 2019-08-19T07:47:36.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-06-10T08:11:27.000Z (over 2 years ago)
- Last Synced: 2025-05-07T14:11:31.863Z (9 months ago)
- Topics: css-transforms, javascript, parser, rollup-js, stringifier, typescript
- Language: TypeScript
- Homepage:
- Size: 350 KB
- Stars: 9
- Watchers: 1
- Forks: 1
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Transform Parser
A small utility which converts css transform string to an object and vice versa.
## Install
```bash
npm i transform-parser
# or
yarn add transform-parser
```
You can also add`transform-parser` directly to your webpage and use it. The package will be available
under `window.transform`.
```html
```
## Usage
Like React, the default unit is px(pixel). When a number is passed as value, it will be suffixed
with `px` and vice verse. Of course, the substitution will be skipped for transforms which requires
numeral values, like `scale3d()`.
```javascript
import { parse, stringify } from 'transform-parser';
const transformString =
'translate3d(10px, 40px, 24px) scale3d(1.1, 1.1, 1.1) perspective(20px)';
parse(transformString);
// => {translate3d: [10, 40, 24], scale3d(1.1, 1.1, 1.1), perspective: 20}
const transformObject = {
rotate3d: [1, 2.0, 3.0, '10deg'],
scale3d: [1.1, 1.1, 1.1],
skewX: '30deg',
};
stringify(transformObject);
// => 'rotate3d(1, 2.0, 3.0, 10deg) scale3d(1.1, 1.1, 1.1) skewX(30deg)'
```
## Local Development
```bash
yarn install
yarn build
yarn test
```
## License
MIT