3

Web サイトに雲を表示するバナーがあります。ここで確認できます: http://sharix.dyndns.org/StackOverflowVisible.php

これらの雲は、バナー ボックス内に限定する必要があります。これは今日まで機能していました。何も触れずに止まりました。現在、ファイルoverflow: hidden;内のルールを無視しているようです。divに 2 番目のルールをdefault.css追加すると機能するように見えますが、ルールに違反しています。ここで確認できます: http://sharix.dyndns.org/StackOverflowHidden.phpoverflow: hidden;#worldtransform-style: preserve-3d;

今日までのように、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>
4

0 に答える 0