0
次のようにJSFiddleを作成しました。クリックすると反転する2つのボックスがあり、それぞれのコンテンツがそれぞれの側に表示されます。 メトロスタイルのレイアウトは、のように、最終的にthisになります。モジュール化CSSフリップ関数
問題：
1）自分のコードから見える大きなフリップ・ボックスと同じ原理に続いて、I）は、代わりに示す大箱（110pxによって寸法110pxと第二小さなボックスを作成したいとこれを最初のものと同じ行に置きます（以下ではありません）。
2）2番目のボックスにflip-container-smallクラスを追加できるように、フリップさせるCSSの部分はモジュール化されている必要があります。したがって、小さなボックスで効果を保持します。
@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);
}<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>望ましい結果：
あなたは追加情報が必要な場合、私はちょうど私に知らせて、私は必要なすべての情報を提供している願っています。