Question

我的网站上有横幅显示一些云。你可以在这里看到它：http://sharix.dyndns.org/StackOverflowVisible.php

这些云应限制在横幅框内。这一直工作到今天。没有我接触任何事情就停止了。现在他们似乎忽略了overflow: hidden;文件中的default.css规则。向overflow: hidden; div添加第二个#world规则似乎有效，但它违反了transform-style: preserve-3d;规则。你可以在这里看到它：http://sharix.dyndns.org/StackOverflowHidden.php

如何同时使用3d变换和溢出规则，就像直到今天一样？ default.css文件的有趣部分：

#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;
}

HTML：

<body>
        <div id="page">
            <div id="header">
                <div id="viewport">
                    <div id="header-content">
                        <h1>Title text</h1>
                        ☁ ☁ ☁
                    </div>
                    <div id="world"></div>
                </div>
                <script type="text/javascript" src="/scripts/oblaki-full.js"></script>
            </div>
            <div id="footer">
                10. April 2013  ~  server uptime:  5:23  ~  load averages: 0.32, 0.39, 0.45             </div>
        </div>
</body>

CSS：transform-style：preserve-3d AND overflow：hidden

0 个答案: