Introducing Ratchet

Ratchet is a cross-browser CSS3 transform parser and manipulator.

HTML

<script src="https://github.com/DamonOehlman/stylar/raw/master/stylar.js"></script>
<script src="https://github.com/DamonOehlman/ratchet/raw/master/ratchet.js"></script>
<div class="content page slideLeft" ng-view="" style=""><!-- Block button in standard bar fixed below top bar -->
<div class="bar bar-standard bar-header-secondary ng-scope">
  <button ng-click="reload()" class="btn btn-block btn-primary ng-binding">Reload Data</button>
</div>
<br class="ng-scope"><br class="ng-scope">
<ul class="table-view ng-scope">
	<!-- ngRepeat: data in requestHistoricalOrder --><li class="table-view-cell media ng-scope" ng-repeat="data in requestHistoricalOrder">	
		<span class="media-object pull-left icon fa fa-calendar-o"></span>
		<span class="badge ng-binding">Orders</span>
		<div class="media-body ng-binding">
			Order ID : 3612962335
			<p class="ng-binding">2016-07-30 02:33:48</p>
			<p class="ng-binding"> 16,950LL</p>
		</div>
	</li><!-- end ngRepeat: data in requestHistoricalOrder --><li class="table-view-cell media ng-scope" ng-repeat="data in requestHistoricalOrder">	
		<span class="media-object pull-left icon fa fa-calendar-o"></span>
		<span class="badge ng-binding">Orders</span>
		<div class="media-body ng-binding">
			Order ID : 14911150026
			<p class="ng-binding">2016-07-29 15:53:55</p>
			<p class="ng-binding"> 8,700LL</p>
		</div>
	</li><!-- end ngRepeat: data in requestHistoricalOrder --><li class="table-view-cell media ng-scope" ng-repeat="data in requestHistoricalOrder">	
		<span class="media-object pull-left icon fa fa-calendar-o"></span>
		<span class="badge ng-binding">Orders</span>
		<div class="media-body ng-binding">
			Order ID : 36735572873
			<p class="ng-binding">2016-07-29 15:53:01</p>
			<p class="ng-binding"> 8,700LL</p>
		</div>
	</li><!-- end ngRepeat: data in requestHistoricalOrder --><li class="table-view-cell media ng-scope" ng-repeat="data in requestHistoricalOrder">	
		<span class="media-object pull-left icon fa...

CSS

.box {
    background: red;
    height: 50px;
    width: 50px;
    margin: 10px;
    
    -webkit-transition: all ease-in-out 1s;
    -moz-transition: all ease-in-out 1s;
    -o-transition: all ease-in-out 1s;
    -ms-transition: all ease-in-out 1s;
    transition: all ease-in-out 1s;
}

body {
    font-family: Helvetica;
    margin-top: 20px;
}

section.about {
    margin: 10px 0;
    background: #333;
    color: white;
    padding: 10px;
    position: fixed;
    bottom: 0px;
    width: 100%;
}

h2 {
    font-size: 1.1em;
    font-weight: bold;
margin-bottom: 5px;        
}

#boxes {
    margin: 10px;
    -webkit-perspective: 500px
    -moz-perspective: 500px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
}

JavaScript

// create a transform programmatically
var transform1 = new ratchet.Transform({
        translate: { x: 150 },
        rotate: { y: 180 }
    }),
    // create a second transform from parsing a string transform
    transform2 = ratchet('scale(0.5)');
    

// use stylar to apply the transform
stylar('.box:nth-child(2n)')
    // apply the transform, but first combined transform 1 and 2
    .set('transform', transform1.add(transform2).toString())
    .set('opacity', 0.5);