Angular Impress

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="impresshook" ng-app="impressjs">
    <div class="impress">
        <div class="step slide" 
        ng-repeat="i in [1,2,3,4,5,6,7,8]"
        data-x="{{((i%2)-1) * 800}}"
        data-y="{{(i%4) * 800}}"
        data-z="{{-i * 500}}"
        data-rotate-x="{{((i%2)-1) * 10}}"
        data-rotate-y="{{((i%6)-1) * 40}}"
        data-rotate-z="{{i * -10}}">
            <h1>{{i}}</h1>
            <p>
            <button ng-click="$emit('previousSlide')">Previous</button>
            <button ng-click="$emit('nextSlide')">Next</button>
            </p>
            <p>Or Left / Right Arrows</p>

        </div>
        <div class="step" data-y="1500">
            <button ng-click="$emit('nextSlide')">Start Over</button>
        </div>
    </div>
</div>

CSS

body {
    font-family:'PT Sans', sans-serif;
    min-height: 740px;
    background: rgb(215, 215, 215);
    pointer-events: none;
    height:100%;
}

h1{
    font-size: 3em;
}

/* #impresshook{
    pointer-events: auto;
} */

.step {
    position: relative;
    width: 900px;
    padding: 40px;
    margin: 20px auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
.slide {
    display: block;
    width: 900px;
    height: 700px;
    padding: 40px 60px;
    background-color: white;
    border: 1px solid rgba(0, 0, 0, .3);
    color: rgb(102, 102, 102);
    opacity: 0.3;
    line-height: 4em;
    -webkit-transition: opacity 0.5s ease;
    pointer-events:none;
}

.step.active{
    opacity: 1;
    pointer-events:auto;
}

JavaScript

(function (window, angular, $) {
    'use strict';

    angular.module('impressjs', [])
        .directive('impress', ['$compile',

    function ($compile) {
        //Helper functions
        var pfx = (function () {

            var style = document.createElement('dummy').style,
                prefixes = 'Webkit Moz O ms Khtml'.split(' '),
                memory = {};

            return function (prop) {
                if (typeof memory[prop] === 'undefined') {

                    var ucProp = prop.charAt(0).toUpperCase() + prop.substr(1),
                        props = (prop + ' ' + prefixes.join(ucProp + ' ') + ucProp).split(' ');

                    memory[prop] = null;
                    for (var i in props) {
                        if (style[props[i]] !== undefined) {
                            memory[prop] = props[i];
                            break;
                        }
                    }

                }

                return memory[prop];
            };

        })();

        // `translate` builds a translate transform string for given data.
        var translate = function (t) {
            return ' translate3d(' + t.x + 'px,' + t.y + 'px,' + t.z + 'px) ';
        };

        // `rotate` builds a rotate transform string for given data.
        // By default the rotations are in X Y Z order that can be reverted by passing `true`
        // as second parameter.
        var rotate = function (r, revert) {
            var rX = ' rotateX(' + r.x + 'deg) ',
                rY = ' rotateY(' + r.y + 'deg) ',
                rZ = ' rotateZ(' + r.z + 'deg) ';

            return revert ? rZ + rY + rX : rX + rY + rZ;
        };

        // `scale` builds a scale transform string for given data.
        var scale = function (s) {
            return ' scale(' + s + ') ';
        };

        // `perspective` builds a perspective transform string for given data.
        var perspective = function (p) {
            return ' perspective(' + p +...