Question

我正在使用Bootstrap 4创建一个响应式网页，该网页具有手风琴内的旋转卡片。不幸的是，卡的背面在手风琴内部是看不到的。如果我在手风琴外部复制完全相同的代码（除了ID），一切都会正常进行。

那么手风琴为什么不能改变卡片背面的行为呢？从样式表中删除backface-visibility会使背面起作用，但现在还为时过早。有什么想法吗？

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <link rel="stylesheet" href="node_modules/open-iconic/font/css/open-iconic-bootstrap.min.css" integrity="sha384-wWci3BOzr88l+HNsAtr3+e5bk9qh5KfjU6gl/rbzfTYdsAVHBEbxB33veLYmFg/a" crossorigin="anonymous">
    <script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT"></script>
    <script type="text/javascript" src="node_modules/bootstrap/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"></script>
    <style>
        .rotate {
            -webkit-perspective: 600;   
            -moz-perspective: 600;   
            perspective: 600;
        }

        .rotate .card.rotated {
            -webkit-transform: rotatey(-180deg);
            -moz-transform: rotatey(-180deg);
            transform: rotatey(-180deg);
        }

        .rotate .card {
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            transform-style: preserve-3d;

            -webkit-transition: 0.5s;
            -moz-transition: 0.5s;
            transition: 0.5s;
        }

        .rotate .card .face {
            -webkit-backface-visibility: hidden;
            -moz-backface-visibility: hidden;
            backface-visibility: hidden;
        }

        .rotate .card .back {
            -webkit-transform: rotatey(-180deg);
            -moz-transform: rotatey(-180deg);
            transform: rotatey(-180deg);
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="accordion mb-3" id="semesterAccordion">
            <div class="card">
                <div class="card-header" id="semesterWinterHeading">
                    <h2 class="mb-0">
                        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#semesterWinterCollapse" aria-expanded="false" aria-controls="semesterWinterCollapse">
                        Accordion
                        </button>
                    </h2>
                </div>
                <div id="semesterWinterCollapse" class="collapse collapsed" aria-labelledby="semesterWinterHeading" data-parent="#semesterAccordion">
                    <div class="card-columns">
                        <div class="card-body">
                            <div class="rotate" id="addCourseCardRotate">
                                <div class="card" id="addCourseCard" style="height: 300px">
                                    <div class="face front" id="addCourseFront">
                                        <div class="d-flex justify-content-center" style="height: 300px">
                                            <img src="img/add.svg" alt="add" width="100">
                                        </div>
                                    </div>
                                    <div class="face back" id="addCourseBack" style="display: none">
                                        <div class="card-body mb-4">
                                            test
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card-columns">
            <div class="card-body">
                <div class="rotate" id="addCardRotate">
                    <div class="card" id="addCard" style="height: 300px">
                        <div class="face front" id="addModuleFront">
                            <div class="d-flex justify-content-center" style="height: 300px">
                                <img src="img/add.svg" alt="add" width="100">
                            </div>
                        </div>
                        <div class="face back" id="addModuleBack" style="display: none">
                            <div class="card-body mb-4">
                                asdf
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        toggleDisplay = function(elementID){
            var element = document.getElementById(elementID);
            if (element.style.display !== 'none') {
                element.style.display = 'none';
            } else {
                element.style.display = 'block';
            }
            console.log(element);
        }

        var rotateAddCardPermanent = false;
        var rotateAddCourseCardPermanent = false;

        rotateAddCard = function(){
            if (!rotateAddCardPermanent){
                $('#addCard').toggleClass('rotated');
                toggleDisplay('addModuleFront');
                toggleDisplay('addModuleBack');
            }
        }

        rotateAddCourseCard = function(){
            if (!rotateAddCourseCardPermanent){
                $('#addCourseCard').toggleClass('rotated');
                toggleDisplay('addCourseFront');
                toggleDisplay('addCourseBack');
            }
        }

        $(document).ready(function(){
            $('#addCardRotate').hover(rotateAddCard);
            $('#addCourseCardRotate').hover(rotateAddCourseCard);
        });
    </script>
</body>

引导手风琴内部和外部的不同行为：旋转卡

0 个答案: