Testing transform with TweenMax

by Silvestrs Kante

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.0/TweenMax.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.0/utils/Draggable.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.0/plugins/ScrollToPlugin.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.0/plugins/ColorPropsPlugin.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.0/plugins/CSSRulePlugin.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.0/plugins/TextPlugin.min.js"></script>
<div id="box2" class="to_box"></div>
<button class="set">Set</button>
<button class="close">Close</button>
<button class="open">Open</button>

CSS

.to_box {
    position: relative;
    width: 50px;
    height: 50px;
    background-color: #06F;
    display: inline-block;
    margin: 10px 20px 20px 235px;
}

JavaScript

$(document).on("click","button.set",function () {
    console.log($("div"));
    TweenMax.set($("div"), {
        css: {
            rotationX: 0,
            transformOrigin: "center bottom",
            transformPerspective: 200
        }
    })
});

$(document).on("click","button.close",function () {
    TweenMax.to($("div"), 0.5, {
        css: {
            rotationX: 80
        }
    })
});

$(document).on("click","button.open",function () {
    TweenMax.to($("div"), 0.5, {
        css: {
            rotationX: 0
        }
    })
});