Titanium UI View 3D transform Sample

app.js

// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');

//
// create base UI tab and root window
//
var win1 = Titanium.UI.createWindow({
    title: 'Tab 1',
    backgroundColor: '#fff'
});

var label1 = Titanium.UI.createLabel({
    color: '#999',
    text: 'I am Window 1',
    font: {fontSize: 20, fontFamily: 'Helvetica Neue' },
    textAlign: 'center',
    width: 'auto'
});

var menu_btn = Titanium.UI.createButton({
  title: 'Menu',
  height: 33
});


var anim_show = Ti.UI.createAnimation({
   duration: 500,
   top: 100
}, function() {
   anim = anim_hide;
});

var anim_hide = Ti.UI.createAnimation({
   duration: 250,
   top: 480
}, function() {
   anim = anim_show;
});


var base_view_show = function() {
  var t = Ti.UI.iOS.create3DMatrix();

  return Ti.UI.createAnimation({
     duration: 500,
     transform: t
  }, function() {
     base_view_anim = base_view_hide();
   });
};

var base_view_hide = function() {
  var t = Ti.UI.iOS.create3DMatrix();

  /**
   * 1, 0, 0, 0,
   * 0, 1, 0, -0.002
   * 0, 0, 1, 0
   * 0, 0, 0, 1
   */

  t.m11 = 1.0;
  t.m22 = 1.0;
  t.m24 = -0.002;
  t.m33 = 1.0;
  t.m44 = 1.0;
  
  t.m42 = -50;


  return Ti.UI.createAnimation({
    duration: 250,
    transform: t
  }, function() {
    base_view_anim = base_view_show();
  });
};

//default
var anim = anim_show;
var base_view_anim = base_view_hide();

menu_btn.addEventListener('click', function(e) {
    floating_view.animate(anim);
    base_view.animate(base_view_anim);
});

var tbar = Ti.UI.iOS.createToolbar({
  items: [menu_btn],
  title: 'view',
  top: 0,
  borderTop: true,
  borderBottom: false,
  translucent: true,
  barColor: '#999'
});

var base_view = Ti.UI.createView({
  height: 460,
  width: 320,
  translucent: false,
  backgroundColor: '#CCFFCC'
});

var base_label = Ti.UI.createLabel({
    color: '#999',
    text: 'I am Base View',
    top: 50,
    font: {fontSize: 20, fontFamily: 'Helvetica Neue' },
    textAlign: 'center',
    width: 'auto'
});

win1.add(label1);
base_view.add(base_label);
base_view.add(tbar);

win1.add(base_view);

var floating_view = Ti.UI.createView({
    top: 480,
    width: 320,
    height: 400,
    backgroundColor: '#C00'
});

win1.add(floating_view);

win1.open();