StackCareersEventRECRUITCSSしか書けないけどウェブ上で3D表現してみたい2023年3月24日こんにちは。ココネウェブ開発室のHです。webページを作るときにちょっとした3D表現をしてみたいなぁと思うと思うのですが、webGLとかThree.jsとか使ったことないしわからんなぁと思うと思うのです。CSSだけで3D表現できないかなぁという人向けに簡単な立方体の実装方法をご紹介します。(class=”panel”)。各面ごとにstyle設定が必要なので、個別にclassを付与します。わかりやすいように各パネルに文字列とclassで透過色を指定しておきます。200pxでボーダーも付けておきます。子要素を3D空間に配置するという設定をするものです。面(class=”panel”)にdefaultの位置設定しておきます。0;}3D空間に配置してますが、同じ位置に配置してるので、まだ平面として重なっているだけの見え方になっています。ここから各面(class=”panel”)を3D空間に配置していきます。奥に100px動かします。*/}手前から見ると見た目は変わらないのですが、斜め上から見るとこのように配置されていることがわかります。続いて側面を配置していきます。縦軸で90度回転させて右に100px動かします。rotateY(-90deg);}最後は上下面を配置します。横軸で-90度回転させて下に100px動かします。rotateX(-90deg);}これで立方体が完成しました。なんか違和感がありますよね、、、?現在の状態を手前から見ると、このように平面にしか見えません。ここで立方体の仕上げです。箱(class=”cube”)を囲う空間(class=”stage”)を作ります。500px;}</style>立体感が出ました。立体的な座標変換ができます。わかりやすく言うと遠近法の設定ができます。遠くのものは小さく、近くのものは大きく見えるというアレです。0や負数と同じく、立体的な座標変換をしない、という設定です。値はz軸のどの位置から見たように表示するか、という距離を設定します。最後にアニメーションを付けて動かしてみます。箱にカーソルを乗せると箱の前面と背面が開き、回転が速くなります。ボタンを設置してJSでclassを付与してアニメーションを変化させても良いと思います。各面がdivエレメントなので、6面に遷移を付けてみても面白いかもです。https://codepen.io/shortrange/pen/mdLwrLXvueバージョンもあります。こちらはボタンで動きを制御しています。backをクリックすると箱が開きます。https://codepen.io/shortrange/pen/MWGavyxココネでは一緒に働く仲間を募集中です。ご興味のある方は、ぜひこちらの採用特設サイトをご覧ください。22Category技術TagcoconeCSS一緒に働くエンジニアを募集していますココネのエンジニア採用はこちら感性をカタチに。株式会社コメントを読み込み中...コメントをどうぞメール名前サイト%d人のブロガーが「いいね」をつけました。