Applies CSS transform properties on an element.
With npm do:
$ npm install dom-transform --save
Install with component(1):
$ component install nk-components/dom-transform
var transform = require('dom-transform');
var el = document.querySelector('div');
transform(el, {
x: 12,
y: 10
});
console.log(transform.get(el, 'transform'))
// > 'translateX(12px) translateY(10px)'
console.log(transform.get(el, 'transform'))
// > {
// 'transform': 'translateX(12px) translateY(10px)',
// 'transformOrigin': ''
// }
transform.reset(el);
// > {
// 'transform': '',
// 'transformOrigin': ''
// }
transform(el, {
translate3d: [10, 10, 10],
origin: [0, 0]
});
Supported properties:
-
translate
:- default:
px
- default:
-
translate3d
:- default:
px
- default:
-
translateX
:- alias:
x
- default:
px
- alias:
-
translateY
:- alias:
y
- default:
px
- alias:
-
translateZ
:- alias:
z
- default:
px
- alias:
-
scale
-
scale3d
-
scaleX
-
scaleY
-
scaleZ
-
rotate3d
-
rotate
:- default:
deg
- default:
-
rotateX
:- default:
deg
- default:
-
rotateY
:- default:
deg
- default:
-
rotateZ
:- default:
deg
- default:
-
skew
:- default:
deg
- default:
-
skewX
:- default:
deg
- default:
-
skewY
:- default:
deg
- default:
-
matrix
-
matrix3d
-
perspective
:- default:
px
- default:
-
origin
MIT