CSS Transform rotatexXand rotateY -


i made transform thing, , want start being: transform: rotatex(15deg) rotatey(180deg); , transform normal(so doing conversely), possible , how? 

<html> <head>     <title>tester</title>     <meta charset="utf-8">     <style type="text/css" >      div{     border-style: solid;     width: 350px;     height: 400px;     margin-top: 50px;     margin-left: 512px; }     p{     float: left;     font-size: 90px;}     .effect1     {          -moz-transition-duration: 2s;     transform: rotatex(15deg) rotatey(180deg);}    </style> </head> <body>     <div>    <p>some text</p>     </div>    <button>magic</button>      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>     <script type="text/javascript">         $('button').click(function(){         box = $("div");         box.addclass('effect1');         });         </script> </body>

just add transformations basic css, set them 0 effect class.

  div{ border-style: solid; width: 350px; height: 400px; transition-duration: 2s; transform: rotatex(15deg) rotatey(180deg);} p { float: left; font-size: 90px;}  .effect1 {      transition-duration: 2s; transform: rotatex(0deg) rotatey(0deg);}

jsfiddle expample

you can make button flip box
back , forth using toggleclass in jquery: sample


Comments

Post a Comment