create Iron Man3 3d movie poster

Wednesday 15 February 2017

create Iron Man3 3d movie poster

Posted By: abhishek verma Wednesday, February 15, 2017 Leave a Reply
Using CSS3 key-frame property, you can create cool  Iron Man3 3d movie poster with using  JavaScript , CSS3 & HTML5 is helping to solve many web problems in a simple way. In this article I want to discuss how to implement CSS3 animations in a better way, use these and enrich your web projects. Take a quick look at these demos and try all these with modern browsers like Chrome, Firefox and Safari, sure you will love these effects. 




CSS3   Syntax

body {
  background: #121212;
}

.app-view {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.app-scene {
  margin: 30px auto 0;
  position: relative;
  width: 100%;
  height: auto;
  -webkit-perspective: 3000px;
  perspective: 3000px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  text-align: center;
}

.app-card {
  display: inline-block;
  position: relative;
  width: 800px;
  height: 450px;
  line-height: 450px;
  text-align: center;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.app-card .content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.app-card .layer-1 {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.app-card .layer-1:after {
  content: '';
  position: absolute;
  width: 802px;
  left: -1px;
  top: -51px;
  height: 100px;
  background: #121212;
  -webkit-transform: translateZ(50px) rotateX(90deg);
  transform: translateZ(50px) rotateX(90deg);
  z-index: 110;
}
.app-card .layer-1:before {
  content: '';
  position: absolute;
  width: 802px;
  left: -1px;
  bottom: -51px;
  height: 100px;
  background: #121212;
  -webkit-transform: translateZ(50px) rotateX(90deg);
  transform: translateZ(50px) rotateX(90deg);
  z-index: 110;
}
.app-card .layer-2 {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.app-card .layer-2:after {
  content: '';
  position: absolute;
  height: 452px;
  top: -1px;
  left: -51px;
  width: 100px;
  background: #121212;
  -webkit-transform: translateZ(35px) rotateY(90deg);
  transform: translateZ(35px) rotateY(90deg);
  z-index: 110;
}
.app-card .layer-2:before {
  content: '';
  position: absolute;
  height: 452px;
  top: -1px;
  right: -51px;
  width: 100px;
  background: #121212;
  -webkit-transform: translateZ(35px) rotateY(90deg);
  transform: translateZ(35px) rotateY(90deg);
  z-index: 110;
}
.app-card .avengers.layer-1 {
  background-image: url(background.png);
  z-index: 1;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.app-card .avengers.layer-2 {
  background-image: url(background-2.png);
  z-index: 2;
  -webkit-transform: translateZ(15px);
  transform: translateZ(15px);
}
.app-card .avengers.layer-3 {
  background-image: url(captain-america.png);
  z-index: 10;
  -webkit-transform: translateZ(25px);
  transform: translateZ(25px);
}
.app-card .avengers.layer-4 {
  background-image: url(black-widow.png);
  z-index: 10;
  -webkit-transform: translateZ(35px);
  transform: translateZ(35px);
}
.app-card .avengers.layer-5 {
  background-image: url(hawk-eye.png);
  z-index: 10;
  -webkit-transform: translateZ(40px);
  transform: translateZ(40px);
}
.app-card .avengers.layer-6 {
  background-image: url(thor.png);
  z-index: 10;
  -webkit-transform: translateZ(50px);
  transform: translateZ(50px);
}
.app-card .avengers.layer-7 {
  background-image: url(iron-man.png);
  z-index: 10;
  -webkit-transform: translateZ(55px);
  transform: translateZ(55px);
}
.app-card .avengers.layer-8 {
  background-image: url(foreground.png);
  z-index: 11;
  -webkit-transform: translateZ(75px);
  transform: translateZ(75px);
}
.app-card .avengers.layer-9 {
  background-image: url(embers-2.png);
  z-index: 12;
  -webkit-transform: translateZ(105px);
  transform: translateZ(105px);
}
.app-card .avengers.layer-10 {
  background-image: url(embers-1.png);
  z-index: 13;
  -webkit-transform: translateZ(120px);
  transform: translateZ(120px);
}
.app-card .avengers.layer-11 {
  background-image: url(logo.png);
  z-index: 15;
  -webkit-transform: translateZ(110px);
  transform: translateZ(110px);
  background-position: left bottom;
}
.app-card .ironman.layer-1 {
  background-image: url(background.png);
  z-index: 1;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.app-card .ironman.layer-2 {
  background-image: url(cloud-1.png);
  z-index: 2;
  -webkit-transform: translateZ(20px);
  transform: translateZ(20px);
}
.app-card .ironman.layer-3 {
  background-image: url(cloud-2.png);
  z-index: 2;
  -webkit-transform: translateZ(30px);
  transform: translateZ(30px);
}
.app-card .ironman.layer-4 {
  background-image: url(splash.png);
  z-index: 2;
  -webkit-transform: translateZ(30px);
  transform: translateZ(30px);
}
.app-card .ironman.layer-5 {
  background-image: url(legion-1.png);
  z-index: 10;
  -webkit-transform: translateZ(35px);
  transform: translateZ(35px);
}
.app-card .ironman.layer-6 {
  background-image: url(legion-2.png);
  z-index: 10;
  -webkit-transform: translateZ(55px);
  transform: translateZ(55px);
}
.app-card .ironman.layer-7 {
  background-image: url(ironman.png);
  z-index: 10;
  -webkit-transform: translateZ(70px);
  transform: translateZ(70px);
}
.app-card .ironman.layer-8 {
  background-image: url(splash-3.png);
  z-index: 10;
  -webkit-transform: translateZ(75px);
  transform: translateZ(75px);
}
.app-card .ironman.layer-9 {
  background-image: url(splash-front.png);
  z-index: 10;
  -webkit-transform: translateZ(95px);
  transform: translateZ(95px);
}
.app-card .ironman.layer-10 {
  background-image: url(logo.png);
  z-index: 10;
  -webkit-transform: translateZ(110px);
  transform: translateZ(110px);
  background-position: right bottom;
}



CSS3  Animation  Syntax
.app-cards-open .app-card {
  -webkit-transform: translateZ(0) rotateX(-25deg) rotateY(50deg) rotateZ(15deg) !important;
  transform: translateZ(0) rotateX(-25deg) rotateY(50deg) rotateZ(15deg) !important;
}
.app-cards-open .app-card .content {
  -webkit-transition: -webkit-transform 0.5s ease-in-out;
  transition: -webkit-transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
}
.app-cards-open .app-card .layer-1 {
  -webkit-transform: translateZ(0px);
  transform: translateZ(0px);
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
.app-cards-open .app-card .layer-2 {
  -webkit-transform: translateZ(40px);
  transform: translateZ(40px);
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
.app-cards-open .app-card .layer-3 {
  -webkit-transform: translateZ(80px);
  transform: translateZ(80px);
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
.app-cards-open .app-card .layer-4 {
  -webkit-transform: translateZ(120px);
  transform: translateZ(120px);
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
.app-cards-open .app-card .layer-5 {
  -webkit-transform: translateZ(160px);
  transform: translateZ(160px);
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
.app-cards-open .app-card .layer-6 {
  -webkit-transform: translateZ(200px);
  transform: translateZ(200px);
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
.app-cards-open .app-card .layer-7 {
  -webkit-transform: translateZ(240px);
  transform: translateZ(240px);
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
.app-cards-open .app-card .layer-8 {
  -webkit-transform: translateZ(280px);
  transform: translateZ(280px);
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
.app-cards-open .app-card .layer-9 {
  -webkit-transform: translateZ(320px);
  transform: translateZ(320px);
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
.app-cards-open .app-card .layer-10 {
  -webkit-transform: translateZ(360px);
  transform: translateZ(360px);
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
.app-cards-open .app-card .layer-11 {
  -webkit-transform: translateZ(400px);
  transform: translateZ(400px);
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
.app-cards-open .app-card .layer-1:before, .app-cards-open .app-card .layer-1:after,
.app-cards-open .app-card .layer-2:before,
.app-cards-open .app-card .layer-2:after {
  display: none !important;
}

.photon-shader {
  z-index: 100;
  -webkit-transform: translateZ(100px);
  transform: translateZ(100px);
}

Javascript  Syntax
<script src="./stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js.download"></script><script src="./jquery.min.js.download"></script><script src="./photon.min.js.download"></script>
<script>;(function($, document, window) {

    $.fn.appify = function(options) {
        var defaults = {
            scene           : '.app-scene',
            cards           : '.app-card',
            cardDetail      : '.app-card-detail',
            activeClass     : 'active',
            cardsOpenClass  : 'app-cards-open',
            cardOpenClass   : 'app-card-open',
        };
       
        var settings = $.extend({}, defaults, options);
       
        return this.each(function() {
            new Appify(this, settings);
        });
       
    };
   
    function Appify(element, settings) {
        this.el = element;
        this.$el = $(element);
        this.settings = settings;
   
        this.isFocused = false;
        this.isMobile = false;
        this.$scene = $(this.settings.scene);
        this.$cards = $(this.settings.cards);
       
        this.cardLight = new Photon.Light( x = 0, y = -500, z = 1000 ),
        this.cardFace = new Photon.FaceGroup( this.$scene[0], this.$cards, 1, .2, true );
           
        this.init();       
       
    }
   
    Appify.prototype = {

        init: function() {
            this.triggerEvents();
        },
   
        destroy: function() {
           
        },
       
        triggerEvents: function() {
            this._mouseMoveCardTiltEvent();
            this._clickCardEvent();
        },
       
        _clickCardEvent: function() {
            var app = this;
           
            $(app.$scene).on('click', app.settings.cards, function(e) {
                app.$scene.toggleClass(app.settings.cardsOpenClass);
              
            });   
        },
       
        _mouseMoveCardTiltEvent: function() {
            var app = this;
           
            $(app.$scene).mousemove(function (event) {
                var cx = Math.ceil(window.innerWidth / 2.0),
                    cy = Math.ceil(window.innerHeight / 2.0),
                    dx = event.pageX - cx,
                    dy = event.pageY - cy,
                    tiltx = - (dy / cy),
                    tilty = - (dx / cx),
                    radius = Math.sqrt(Math.pow(tiltx, 2) + Math.pow(tilty, 2)),
                    degree = radius * 20;
               
                if(!app.$scene.hasClass(app.settings.cardsOpenClass)) {   
                    app.$cards.each( function(i, el) {
                        $(el).css('transform', 'rotate3d(' + tiltx + ', ' + tilty + ', 0, ' + degree + 'deg)');
                       
                    });
                   
                    app._cardLightRender();
                }
            });
        },
       
        _cardLightRender: function() {
            this.cardFace.render(this.cardLight, true, true);
        },
       
    }

})(jQuery, document, window);

(function($) {

    $(document).ready(function() {
        $('.app-view').appify();
    });
   
})(jQuery);

</script>

HTML Syntax
<div class="app-view">
  <div class="app-scene">
    <div class="app-card" style="transform: rotate3d(0.969298, -0.145, 0, 19.6017deg);"><div class="photon-shader" style="position: absolute; top: 0px; left: 0px; width: 800px; height: 450px; background: rgba(255, 255, 255, 0.14902);"></div>
      <div class="content ironman layer-1"></div>
      <div class="content ironman layer-2"></div>
      <div class="content ironman layer-3"></div>
      <div class="content ironman layer-4"></div>
      <div class="content ironman layer-5"></div>
      <div class="content ironman layer-6"></div>
      <div class="content ironman layer-7"></div>
      <div class="content ironman layer-8"></div>
      <div class="content ironman layer-9"></div>
      <div class="content ironman layer-10"></div>
    </div>
  </div>
</div>


Video Demo of   Iron Man3 3d movie poster




0 comments: