Question

我创建了以下JSFiddle，其中有两个框在点击后翻转，允许在每一面显示不同的内容。根据聪明的this，地铁风格的布局最终会显示tutorial by Mr Bool。

问题：
1）遵循与我的代码中可见的大翻盖盒相同的原则，我想制作第二个尺寸为110px 110px的小盒子（而不是显示的大盒子）并放置此与第一行（不在下面）相同的行 2）使其翻转的CSS部分应该是模块化的，这样我就可以在第二个框中添加flip-container-small类，因此只需使用较小的框即可保留效果。

＆＃13;

@font-face { font-family: Century; src: url('GOTHIC.ttf'); }

body{
    font-family: 'Muli', sans-serif;
    background-color: rgb(51,51,51);
    color: #fff;
    padding:20px;
    /*width: 100%; height: 100%; margin: 0 auto; text-align: center;*/
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 auto;
    padding: 0;
}

.amarelo {
    background:#DAA520;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
         -khtml-user-select: none; /* Konqueror HTML */
             -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* Internet Explorer/Edge */
                user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
            cursor: default; /* Cursor normal instead of highlighter (i.e: I ) */
}

.all {
    margin-top: 20px;
    width:auto;
    height:auto;
}

.row {
    width:auto;
    padding-bottom:5px;
    height:auto;
    display:table;
}

/* Flip Box Rules Below */

/* entire container, keeps perspective */
.flip-container {
    perspective: 1000px;
}
.flip-container-small {
    height:110px;   
    width:110px;
}
/* flip the pane when hovered */
.flip-container.hover .flipper {
    transform: rotateY(180deg);
}
/* Common pane settings */
.flip-container, .front, .back {
    width:225px;
    height:110px;
    border-radius: 2.5px;
}
/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}
/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;

    position: absolute;
    top: 0;
    left: 0;

    /* Aligning Content in box centered */
    display: flex;
    flex-direction:column;
    align-items: center;
    justify-content:center;
    text-align: center;
}
/* front pane, placed above back */
.front {
    z-index: 2;
    /* for firefox 31 */
    transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
    transform: rotateY(180deg);
}

＆＃13;

<body class="noselect">
    <h1>Alignment - Testing (click box to flip)</h1>

    <div class="all">
        <div class="row">
            <!-- First Box Start -->
            <div class="flip-container" onclick="this.classList.toggle('hover');">
                <div class="flipper">
                    <div class="front amarelo">
                        <!-- front content -->
                        <h2 id="24hrClock">13:22</h2>
                        <h4 id="longDate">Monday 01 January 2000</h4>
                    </div>
                    <div class="back amarelo">
                        <!-- back content -->
                        <h2 id="12hrClock">1:22 PM</h2>
                        <h4 id="shortDate">01/01/00</h4>
                    </div>
                </div>
            </div>
            <!-- First Box End -->

            <!-- Second Box Start -->
            <div class="flip-container" onclick="this.classList.toggle('hover');">
                <div class="flipper">
                    <div class="front amarelo">
                        <!-- front content -->
                        <h2 id="24hrClock"></h2>
                        <h4 id="longDate">Resize this to 110px x 110px, place to right side of above</h4>
                    </div>
                    <div class="back amarelo">
                        <!-- back content -->
                        <h2 id="12hrClock"></h2>
                        <h4 id="shortDate"></h4>
                    </div>
                </div>
            </div>
            <!-- Second Box End -->
            <p>I would like to have a second flip box with the smaller size of 110px x 110px right next to the first (not below).<br> NOTE: I want to reuse existing code from the large container, just with new dimensions, as the flipping principle is the same.</p>
        </div>
    </div>

</body>

＆＃13;

期望的结果：

我希望我已经提供了所需的所有信息，如果您需要其他信息，请告诉我。

Answer 1

经过许多令人沮丧的时间后，我终于能够得到我所追求的结果（减去布局的响应性 - 我在这个帖子中没有要求）。

对于任何有兴趣的人，都可以找到我的解决方案和自适应布局问题here。

模块化CSS翻转功能

1 个答案: