2

已解决：在重新阅读 w3 转换规范后，我意识到由于 DOM 结构，页脚被认为是 3d 上下文的一部分，并且受到旋转元素的影响。我只是将 .cardsContainer 放在另一个元素 .cards3dContainer 中，而页脚现在不被视为 3d 上下文的一部分。

-webkit-透视：1000px；似乎表明 3d 上下文从 DOM 中的那个点开始。

使用 css3 转换和覆盖另一个 div 中的按钮点击区域的一部分进行旋转的容器存在重大问题。

变换在视觉上起作用，并且容器向后倾斜（使用 rotateX）。然而，尽管页脚中的按钮具有更高的 z-index 并且自然堆叠到容器上方，但在旋转的容器和按钮视觉重叠的地方，它的命中区域被忽略了。该按钮仍然“看起来”在旋转容器的顶部，但就像它在它下面一样。

我应该提到我在 CSS 中使用了 Less（并且所有的 Less 代码都可以工作）。

我查看了很多类似的问题，但各种解决方案对我不起作用。在那些不起作用（省略供应商前缀）中： translate3d(0px, 0px, 0px); 变换风格：扁平化；

这是代码的简短版本：

html:
    <div class="screen snap" style="display: block;">
        <div class="container">**<!-- has perspective set to 1000 -->**
            <div class="cardsContainer"> **<!-- is rotated on x using transform -->**
                <div class="card" style="left: 130px; display: block;">
                    <div class="cardBack"></div>
                    <div class="cardFront" style="opacity: 0;">
                        <div class="cardContent">A piece of fruit.</div>
                    </div>
                </div>
            </div>
            <footer>
                        **<!-- at certain screen sizes, when the container and footer overlap, top half of this buttons hit area is inactive-->**
                <button class="checkButton">Start</button>
            </footer>
        </div>
    </div>

以下是完整的文件，期待任何建议/提示：

.html 文件：

<div class="screen snap" style="display: block;">
    <div class="container">
        <div class="cardsContainer">
            <div class="card" style="left: 130px; display: block;">
                <div class="cardBack"></div>
                <div class="cardFront" style="opacity: 0;">
                    <div class="cardContent">A piece of fruit.</div>
                </div>
            </div>

            <div class="card" style="left: 420px; display: block;">
                <div class="cardBack"></div>
                <div class="cardFront" style="opacity: 0;">
                    <div class="cardContent">Paint</div>
                </div>
            </div>

            <div class="card" style="left: 420px; display: none;">
                <div class="cardBack"></div>
                <div class="cardFront">
                    <div class="cardContent">Nail</div>
                </div>
            </div>

            <div class="card" style="left: 420px; display: none;">
                <div class="cardBack"></div>
                <div class="cardFront">
                    <div class="cardContent">Apple</div>
                </div>
            </div>

            <div class="card" style="left: 420px; display: none;">
                <div class="cardBack"></div>
                <div class="cardFront">
                    <div class="cardContent">House</div>
                </div>
            </div>

        </div>

        <footer>
            <button class="checkButton">Start</button>
        </footer>
    </div>
</div>

.less 文件：

.screen.snap .container{
    padding: 0;
    margin: 0;
    border: 0;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    border-radius: 0;
    box-shadow: none;
    vertical-align: baseline;
    background-color: #efe8b6;
    -webkit-perspective:1000px;

    .cardsContainer{
        position:absolute;
        width:800px;
        height:350px;
        top:100px;
        text-align: center;
        background-color: lighten(#efe8b6, 10%);
        -webkit-transform: rotateX(20deg);

        .card {
            position: absolute;
            width:250px;
            height:350px;
            border-radius: 10px;

            .cardFront{
                background-image: url('images/snap_card_front.png');
                background-repeat: no-repeat;
                width:250px;
                height:350px;
                position: absolute;


                .cardContent{
                    width:200px;
                    height:300px;
                    font-size: 37px;
                }
            }

            .cardBack{
                background-image: url('images/snap_card_back.png');
                background-repeat: no-repeat;
                width:250px;
                height:350px;
                position: absolute;
            }
        }
    }
}

footer{
    z-index:999;
    background-color: #f00;
    position: relative;

    .button{
        position:absolute;
        width:50px;
        height:50px;
        background-color: #ccc;
        border-radius: 5px;
        font-size: 25px;
        cursor: pointer;
    }
}
4

1 回答 1

2

After re-reading the w3 spec for transforms, I realised what the problem was.

-webkit-perspective:1000px; seems to state that the 3d context begins at that point in the DOM. I was applying the perspective style to the container which both the footer and the cardsContainer were part of. The footer was then being considered part of the 3d context due to DOM structure and was being affected by rotated elements.

I simply put .cardsContainer inside of another element .cards3dContainer and the footer is now not considered part of the 3d context because it is now not inside the dom structure which has perspective style set.

The new structure is now this:

.screen.snap .container{
    .cards3dContainer{
        -webkit-perspective:1000px;

        .cardsContainer{
                }
     }

     .footer{
     }
}
  • Apologies to anyone who may have been working on an answer at the moment.
于 2013-04-05T10:57:02.583 回答