Inline Transform Parser

To install

1npm install --save inline-transform-parser

How to use

1
2/*
3    <div class="myEl" style="transform: transform3d( 0px,0em,0px ) rotate(30deg)"></div>
4*/
5
6import TransformParser from 'inline-transform-parser';
7
8let el              = document.querySelector('.myEl');
9let transformParser = new TransformParser( el );
10
11transformParser.transform3d.x.value = 52.5;
12transformParser.transform3d.y.value = 100.89;
13transformParser.transform3d.y.unit  = 'px';
14transformParser.transform3d.z.value = 0;
15
16el.style.transform = transformParser.stringify();
17
18/*
19    // Result
20    <div class="myEl" style="transform: transform3d( 52.5px, 100.89px, 0px ) rotate(30deg)"></div>
21*/
22

Helpful info

• You can update any transform type on the element you feed the parser. So if you needed to you can change the rotation and any other property you wish.
• Each transform type will have its value as an object of key value pairs. In the example above you see each key for transform3d has a value and unit both of which you can change.