Wifeo Creative Code

<<< back to homepage for others creatives tricks

JQUERY TRANSFORM ROTATE Y

WIFEO/CODE

Post hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam licentia crudelitati indulta per suspicionum nebulas aestimati quidam noxii damnabantur. quorum pars necati, alii puniti bonorum multatione actique laribus suis extorres nullo sibi relicto praeter querelas et lacrimas, stipe conlaticia victitabant, et civili iustoque imperio ad voluntatem converso cruentam, claudebantur opulentae domus et clarae.

BLOGGERS, SHARE THIS CREATIVE DEMO ON YOUR WEBSITE :

     
    <p data-height="360" data-theme-id="9277" data-slug-hash="DGrIa" data-default-tab="result" data-user="wifeo" class='codepen'>See this Pen on <a href='http://codepen.io/wifeo/pen/DGrIa'>Codepen</a>
<script async src="//codepen.io/assets/embed/ei.js"></script><div align="center">View source code on <a href="http://www.wifeo.com/code/21-jquery-transform-rotate-y.html">wifeo/code</a></div>

On Facebook

On Twitter

On Google+

On LinkedIn

CSS CODE :

.contener
{
    -webkit-perspective:600px;
    -moz-perspective:600px;
    -ms-perspective:600px;
    perspective:600px;
    top: 0;
    bottom: 0;
    left: 0;
    right:0;
    position: absolute;
    margin: 50px;
    z-index: 2;
}
#corp_page
{
    top: 0;
    bottom: 0;
    left: 0;
    right:0;
    position: absolute;
    background-color:#DC4B39;
    padding: 20px;
    -webkit-transform: rotateY( 0deg );
    -webkit-transition: all .3s;
    -webkit-transform-origin: 100% 100%;
    -webkit-transform-style: preserve-3d;
    -moz-transform: rotateY( 0deg );
    -moz-transition: all .3s;
    -moz-transform-origin: 100% 100%;
    -moz-transform-style: preserve-3d;
    -ms-transform: rotateY( 0deg );
    -ms-transition: all .3s;
    -ms-transform-origin: 100% 100%;
    -ms-transform-style:;
    transform: rotateY( 0deg );
    transition: all .3s;
    transform-origin: 100% 100%;
    transform-style: preserve-3d;
}
.menu
{ 
   top:0;
   bottom:0;
   left:0;
   width: 200px;
   position: absolute;
   margin: 5px;
   display: none;
   margin-top:50px;
  background-color:transparent;
}

JAVASCRIPT CODE :

$(document).ready(function() 
{
      $('#btn_menu').click(function()
        {             
          $("#corp_page").css({
          "-webkit-transform": "rotateY(-20deg)",
          "-webkit-transition": "all .4s linear",
          "-webkit-transform-origin": "100% 100%",
          "-webkit-transform-style": "preserve-3d",
          "-moz-transform": "rotateY(-20deg)",
          "-moz-transition": "all .4s",
          "-moz-transform-origin": "100% 100%",
          "-moz-transform-style": "preserve-3d",
          "-ms-transform": "rotateY(-20deg)",
          "-ms-transition": "all .4s",
          "-ms-transform-origin": "100% 100%",
          "-ms-transform-style": "preserve-3d",
          "transform": "rotateY(-20deg)",
          "transition": "all .4s",
          "transform-origin": "100% 100%",
          "transform-style": "preserve-3d"
          }); 
          $(".menu").delay(170).css({
          "z-index": "5",
          "-webkit-transition": "all .4s",
          "-moz-transition": "all .4s",
          "-ms-transition": "all .4s",
          "transition": "all .4s"
          }).fadeIn("fast");
        });
      $('#btn_menu_close,#corp_page').click(function()
        { 
          $(".menu").fadeOut("fast").css({
          "z-index": "1",
          "-webkit-transition": "all .4s",
          "-moz-transition": "all .4s",
          "-ms-transition": "all .4s",
          "transition": "all .4s"
          });
          $("#corp_page").css({
          "-webkit-transform": "rotateY(0deg)",
          "-webkit-transition": "all .7s linear",
          "-webkit-transform-origin": "100% 100%",
          "-webkit-transform-style": "preserve-3d",
          "-moz-transform": "rotateY(0deg)",
          "-moz-transition": "all .7s",
          "-moz-transform-origin": "100% 100%",
          "-moz-transform-style": "preserve-3d",
          "-ms-transform": "rotateY(0deg)",
          "-ms-transition": "all .7s",
          "-ms-transform-origin": "100% 100%",
          "-ms-transform-style": "preserve-3d",
          "transform": "rotateY(0deg)",
          "transition": "all .7s",
          "transform-origin": "100% 100%",
          "transform-style": "preserve-3d"
          });
          
        });  
})

HTML CODE :

<div style="position: relative; height:400px; width:825px;">
<div class="contener">
<div id="corp_page" style="overflow:scroll">
<div style="width:100%">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
  <tbody>
    <tr>
      <td style="padding:10px; font-weight:100; color:#ffffff;" valign="top">
WIFEO/CODE
      </td>
    </tr>
    <tr>
      <td style="padding:10px;" valign="top">
Post hoc impie perpetratum quod in aliis quoque iam timebatur, 
tamquam licentia crudelitati indulta per 
suspicionum nebulas aestimati quidam noxii damnabantur. 
quorum pars necati, alii puniti bonorum multatione actique 
laribus suis extorres nullo sibi relicto praeter 
querelas et lacrimas, stipe conlaticia victitabant, 
et civili iustoque imperio ad voluntatem converso cruentam, claudebantur 
opulentae domus et clarae.

</td>
    </tr>
  </tbody>
</table>
</div>
</div>
</div>

<div class="menu">Item 2<br /><br />Item 3<br /><br />Item 4<br /><br />
<img id="btn_menu_close" src="http:YOUR-URL-IMAGE.png" style=" cursor:pointer;" /></div>

<div style="top:0; left:0; position:absolute; cursor:pointer;">
<img id="btn_menu" src="http:YOUR-URL-IMAGE.png" /></div>

</div>