日々の学習のアウトプットの為、自主学習の際に工夫した内容を記録していきます。
今回は 自分がＣＳＳでの立体制御の練習の為に作成したオリジナルサンプルを紹介します。
（※練習で作成したデザインなので、機能性は乏しいかもしれません…）
テーマ：CSS3 の transform プロパティで、平面ではなく、立体の画面制御を行う
記述サンプル
今回はHTMLファイルに全ての記述を行うので、コードをそのままコピペするだけで、実際の動作を確認出来るようにしました。
HTML
<!doctype html>
<html>
<style>
* {
margin: 0;
}
#scene {
/* 立体ディスプレイの表示位置を指定します。※今回は画面中央に表示しています。 */
position: fixed;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
/* 立体ディスプレイの奥行きの深さを指定します。 */
perspective: 700px;
}
.boxBase {
/* 立体ディスプレイ全体の基準サイズを設定します。 */
width: 50vmin;
height: 50vmin;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
animation: turnAround 70s linear 0s infinite normal none running;
-webkit-animation: turnAround 70s linear 0s infinite normal none running;
}
/* 立体ディスプレイのアニメーションを指定します。今回はY軸に360度回転し続けるように設定しました。 */
@keyframes turnAround {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
@-webkit-keyframes turnAround {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
/* 立体ディスプレイの底面部分の設定を行います。 */
.screen_bottom {
background-color: gray;
width: 100%;
max-width: 50vmin;
height: 100%;
max-height: 50vmin;
box-shadow: 10px 10px 10px 5px rgba(0, 0, 0, 0.4);
border-style: groove;
border-radius: 50%;
position: absolute;
bottom: -40%;
left: 50%;
transform: rotateX(90deg) translateX(-50%);
}
/* 各ディスプレイの骨組み部分の設定を行います。 */
.mini_boxBase {
width: 100%;
height: 100%;
position: absolute;
top:0;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
.mini_boxBase:nth-of-type(2) {
transform: rotateY(60deg);
}
.mini_boxBase:nth-of-type(3) {
transform: rotateY(120deg);
}
/* 各立体ディスプレイの設定を行います。 */
.screen_side {
/* 今回は単色の背景ですが、画像背景や、動画背景、文書等を表示することも可能です。 */
background-color: red;
width: 50%;
max-width: 80vh;
height: 80%;
max-height: 50vw;
transform: rotateY(90deg);
border-style: groove;
border-radius: 20px;
position: absolute;
right: -40%;
bottom: 70px;
}
.screen_side:nth-of-type(2) {
background-color: peru;
left: -40%;
}
.screen_side2 {
background-color: blue;
width: 50%;
max-width: 80vh;
height: 80%;
max-height: 50vw;
transform: rotateY(90deg);
border-style: groove;
border-radius: 20px;
position: absolute;
right: -40%;
bottom: 70px;
}
.screen_side2:nth-of-type(2) {
background-color: black;
left: -40%;
}
.screen_side3 {
background-color: lightpink;
width: 50%;
max-width: 80vh;
height: 80%;
max-height: 50vw;
transform: rotateY(90deg);
border-style: groove;
border-radius: 20px;
position: absolute;
right: -40%;
bottom: 70px;
}
.screen_side3:nth-of-type(2) {
background-color: lawngreen;
left: -40%;
}
</style>
<body id="" class="">
<div id="scene">
<div class="boxBase">
<div class="screen_bottom"></div>
<div class="mini_boxBase">
<div class="screen_side"></div>
<div class="screen_side"></div>
</div>
<div class="mini_boxBase">
<div class="screen_side2"></div>
<div class="screen_side2"></div>
</div>
<div class="mini_boxBase">
<div class="screen_side3"></div>
<div class="screen_side3"></div>
</div>
</div>
</div>
</body>
</html>
解説
１・#scene で立体ディスプレイの表示位置を指定
↓
２・.boxBase で立体ディスプレイのアニメーションを設定
↓
３・.mini_boxBase で立体ディスプレイの骨組みを設定
↓
４・.screen_side で実際に表示される立体ディスプレイの設定を行う。
文章としては以上になるのですが、実際に記述してみようとすると、立体の制御のコツを掴むまでに、ものすごく苦戦しました…
実際の動作が気になる方は、テキストデータを丸ごとコピペして確かめてみましょう！
（簡素な作りですが、感想、アドバイスなどあれば頂けると幸いです）
今回はこれで以上になります。
あくまで自分用の備忘録ですが、他の方の参考になれば幸いです。