title: RotateY transition not working properly
body: <p>When i hover once, transition is proper, but on second time, transition becomes wierd, as if the perspective: 800px starts working after transition has taken place.
  Please also tell how can i set rotation about an edge except center.
  I know about transform-origin but nothing such as transform-axis.</p>
  
  <p>I want that when i hover over the , these images should open like a window.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var left=document.getElementById("left");
  var right=document.getElementById("right");
  function curtain() {
   left.style.transform="rotateY(70deg)";
   right.style.transform="rotateY(-70deg)";
  }
  function back() {
   left.style.transform="rotateY(0deg)";
   right.style.transform="rotateY(0deg)";
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#animate{
      width: 400px;
   height: 300px;
   margin: auto;
   position: relative;
   perspective: 800px;
  }
  img {
   width: 100%;
  }
  #left {
   position:absolute;
   top: 0;
   right: 50%;
   padding: 0;
   margin: 0;
   width: 50%;
   transition: transform 0.5s;
  }
  #right {
   position: absolute;
   top: 0;
   right: 0%;
   padding: 0;
   margin: 0;
   width: 50%;
      transition: transform 0.5s;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
      &lt;head&gt;
       &lt;link href="style/style.css" rel="stylesheet"&gt;
   &lt;/head&gt;
   &lt;body&gt;
       &lt;div id="animate" onmouseover="curtain()" onmouseout="back()"&gt;
        &lt;div id="left"&gt;&lt;img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Ariyunda.JPG/200px-Ariyunda.JPG"&gt;&lt;/div&gt;
     &lt;div id="right"&gt;&lt;img src="http://www.cs.cornell.edu/courses/cs3110/2009sp/hw/ps4/beach_original.png"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;script src="script/script.js"&gt;&lt;/script&gt;
   &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>