Skip to content

Files

Latest commit

author
dntzhang
Apr 5, 2017
dc9bd10 · Apr 5, 2017

History

History
This branch is 75 commits behind AlloyTeam/PhyTouch:master.

transformjs

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
Dec 23, 2016
Mar 3, 2017
Mar 3, 2017
Dec 26, 2016
Feb 13, 2017
Apr 5, 2017
Apr 5, 2017
Apr 5, 2017

transformjs

made css3 transform super easy

Home

http://alloyteam.github.io/AlloyTouch/transformjs/

Demo

Install

You can install it via npm:

npm install css3transform

API

Transform(domElement, [notPerspective]);

Usage

Transform(domElement);//or Transform(domElement, true);

//set "translateX", "translateY", "translateZ", "scaleX", "scaleY", "scaleZ", "rotateX", "rotateY", "rotateZ", "skewX", "skewY", "originX", "originY", "originZ"
domElement.translateX = 100;
domElement.scaleX = 0.5;
domElement.originX = 0.5;

//get "translateX", "translateY", "translateZ", "scaleX", "scaleY", "scaleZ", "rotateX", "rotateY", "rotateZ", "skewX", "skewY", "originX", "originY", "originZ"
//console.log(domElement.translateX )

Omi Version:

import Omi from 'omi';
import OmiTransform from '../../omi-transform.js';

OmiTransform.init();

class App extends Omi.Component {
    constructor(data) {
        super(data);
    }

    installed(){
        setInterval(function(){
            this.refs.test.rotateZ += 0.1;
        }.bind(this));
    }

    render() {
        return  `
            <div omi-transform class="test" ref="test" rotateZ="45" translateX="100" >
                omi-transform
            </div>

        `;
    }

    style(){
        return  `
            .test{
                font-size: 20px;
                border: 1px solid red;
                width: 150px;
                font-size
                min-height: 150px;
                text-align: center;
                line-height:150px;
            }
         `;
    }
}

Omi.render(new App(),"#container");

React Version:

//set "translateX", "translateY", "translateZ", "scaleX", "scaleY", "scaleZ", "rotateX", "rotateY", "rotateZ", "skewX", "skewY", "originX", "originY", "originZ"
render() {
    return (
        <Transform
          translateX={100}
          scaleX={0.5}
          originX={0.5}>
          <div>sth</div>
        </Transform>
    );
}

// you can also use other porps, such as "className" or "style"
render() {
    return (
        <Transform
          translateX={100}
          className="ani"
          style={{width: '100px', background: 'red'}}
          <div>sth</div>
        </Transform>
    );
}

License

This content is released under the MIT License.