omi-transform

2.0.3 • Public • Published

omi-transform

Made 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

Usage

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 (
      <css3-transform rotateZ={data.rotateZ} translateX={0} perspective={0} >
        <div ref={this.linkRef}>
          omi-transform
          </div>
      </css3-transform>
    )
  }
}
 
render(<my-app />, "body");

Using in pure js

var ele = document.querySelector("#test1")
Transform(element1)
element1.rotateZ = 45

Demos

License

MIT © dntzhang

Package Sidebar

Install

npm i omi-transform

Weekly Downloads

4

Version

2.0.3

License

MIT

Unpacked Size

234 kB

Total Files

23

Last publish

Collaborators

  • yse
  • leehyunggeun
  • pasturn
  • dntzhang
  • xcatliu
  • dorsywang