方法-3Dフリップボックス
CSSを使用してフリップボックスを作成する方法を学びます。
フリップボックス
下のボックスの上にマウスを移動して、効果を確認します。
水平フリップ:
表側
裏側
垂直フリップ:
表側
裏側
フリップボックスを作成する方法
ステップ1)HTMLを追加します。
例
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<h2>Front
Side</h2>
</div>
<div
class="flip-box-back">
<h2>Back Side</h2>
</div>
</div>
</div>
ステップ2)CSSを追加します。
例
/* The flip box container - set the width and height to whatever you want. We
have added the border property to demonstrate that the flip itself goes out of
the box on hover (remove perspective if you don't want the 3D effect */
.flip-box {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective:
1000px; /* Remove this if you don't want the 3D effect */
}
/* This
container is needed to position the front and back side */
.flip-box-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform
0.8s;
transform-style: preserve-3d;
}
/* Do an horizontal
flip when you move the mouse over the flip box container */
.flip-box:hover .flip-box-inner {
transform: rotateY(180deg);
}
/* Position the front and back side */
.flip-box-front, .flip-box-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}
/* Style the front side */
.flip-box-front {
background-color: #bbb;
color: black;
}
/* Style the back side */
.flip-box-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
垂直フリップ
水平方向ではなく垂直方向の反転を行うには、次のrotateX
代わりにメソッドを使用しrotateY
ます。
例
.flip-box:hover .flip-box-inner {
transform: rotateX(180deg);
}
.flip-box-back {
transform: rotateX(180deg);
}
注:これらの例は、タブレットや携帯電話では正しく機能しません。
ヒント: rotate()メソッドなどの2D変換の詳細については、CSS2D変換チュートリアルにアクセスしてください。
ヒント: 3D変換の詳細については、 CSS3D変換チュートリアルにアクセスしてください。