title: CSS: transform-style: preserve-3d AND overflow: hidden
body: <p>I have the banner on my website to display some clouds.
  You can see it here: <a href="http://sharix.dyndns.org/StackOverflowVisible.php" rel="nofollow">http://sharix.dyndns.org/StackOverflowVisible.php</a></p>
  
  <p>These clouds should be confined within the banner box. This was working until today. It stopped without me touching anything. Now they seem to ignore the <code>overflow: hidden;</code> rule in the <code>default.css</code> file.
  Adding a second <code>overflow: hidden;</code> rule to the <code>#world</code> div seems to work, but it breaks the <code>transform-style: preserve-3d;</code> rules. You can see it here: <a href="http://sharix.dyndns.org/StackOverflowHidden.php" rel="nofollow">http://sharix.dyndns.org/StackOverflowHidden.php</a></p>
  
  <p>How to have both the 3d-transforms and the overflow rules working, like it was until today?
  The interesting part of the <code>default.css</code> file:</p>
  
  <pre><code>#header {
  background: #4b6983;
  border: 2px solid #7590ae;
  text-align: center;
  padding: 0px;
  margin: 10px 10px 0px 10px;
  color: #ffffff;
  text-shadow:0px 1px 5px black;
  }
  
  #viewport {
  overflow: hidden;
  background-image: $gradient;
  background-image: $oGradient;
  background-image: $mozGradient;
  background-image: $webkitGradient;
  background-image: $msGradient;
  }
  
  #header-content:hover {
  z-index: 2;
  transform: translateZ( 1px );
  -moz-transform: translateZ( 1px );
  -webkit-transform: translateZ( 1px );
  -o-transform: translateZ( 1px );
  -ms-transform: translateZ( 1px );
  }
  
  #world:before {
      content: "";
      background: url(zvezde.png);
      opacity: $starOpacity;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      position: absolute;
      z-index: -1;
  }
  
  #world {
  overflow: hidden; /*added today to confine the clouds. breaks preserve-3d*/
  position: relative;
  top:-100px;
  height: 150px;
  width:140%;
  margin-left:-20%;
  margin-bottom:-100px;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  pointer-events:none;
  }
  
  .cloudBase {
  position: absolute;
  left: 50%;
  top: 250px;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  margin-top: -10px;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  }
  
  .cloudLayer {
  /* display:none; */
  position: absolute;
  left: 50%;
  top: 50%;
  width: 256px;
  height: 256px;
  margin-left: -128px;
  margin-top: -128px;
  -webkit-transition: opacity .5s ease-out;
  -moz-transition: opacity .5s ease-out;
  -o-transition: opacity .5s ease-out;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
          &lt;div id="page"&gt;
              &lt;div id="header"&gt;
                  &lt;div id="viewport"&gt;
                      &lt;div id="header-content"&gt;
                          &lt;h1&gt;Title text&lt;/h1&gt;
                          ☁ ☁ ☁
                      &lt;/div&gt;
                      &lt;div id="world"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;script type="text/javascript" src="/scripts/oblaki-full.js"&gt;&lt;/script&gt;
              &lt;/div&gt;
              &lt;div id="footer"&gt;
                  10. April 2013  ~  server uptime:  5:23  ~  load averages: 0.32, 0.39, 0.45             &lt;/div&gt;
          &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>