title: In css3, how to clip inner transformed `position:absolute` element using outer element's border?
body: <p>Below is the snippet:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.out {
      margin: 100px auto;
      width: 50%;
      height: 100px;
      background-color: green;
      
  }
  
  .in {
      width: 50%;
      height: 50px;
      background-color: red;
      transform: translate3d(-20%, -40%, 0px) scale(0.7);
      position: absolute;
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="out"&gt;
      &lt;div class="in"&gt;
      &lt;/div&gt;
      
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As can be seen, the inner element (red square) goes out of the border/bound of the outer element (green square).</p>
  
  <p>Does anyone have ideas about how to clip the part of inner element which goes out of the border of the outer element?</p>
  
  <p>--</p>
  
  <p>I find <code>overflow: hidden</code> doesn't work well because of the <code>position: absolute</code> property in the inner element..</p>