Omi / css3transform integration. Support CSS3 transformation in your Omi project.
npm install omi-transformMade css3 transform super easy.

Supported properties(get and set):
| Property | Describe |
| --------- | ---------------------- |
| translateX |translateX |
| translateY |translateY |
| translateZ |translateZ |
| scaleX |scaleX |
| scaleY |scaleY |
| scaleZ |scaleZ|
| rotateX |rotateX |
| rotateY |rotateY |
| rotateZ |rotateZ |
| skewX | skewX|
| skewY |skewY |
| originX | the basic x point of rotation|
| originY | the basic y point of rotation |
| originZ | the basic z point of rotation|
| perspective |Perspective projection distance |
``js
import { render, WeElement, tag } from "omi";
import "omi-transform";
@tag("my-app")
class MyApp extends WeElement {
install() {
this.data.rotateZ = 30
this.linkRef = (e) => {
this.animDiv = e
}
}
installed() {
setInterval(() => {
//slow
// this.data.rotateZ += 2
// this.update()
//fast
this.animDiv.rotateZ += 2
//sync for update call of any scenario
this.data.rotateZ = this.animDiv.rotateZ
}, 16)
}
render(props, data) {
return (
omi-transform
)
}
}
render(
`
`js``
var ele = document.querySelector("#test1")
Transform(element1)
element1.rotateZ = 45
MIT © dntzhang