PcSchool.Club

パソコンを分かりやすく解説することを目指す無料のスキルアップサイトです

岐阜のパソコン教室「パソコンスクール・テルン」

CSSを利用した3Dの立方体を作成する

2021年7月2日

今回は、CSSを利用した3Dの作成をしていきます。
ある程度CSSをマスターしている方は非常に分かりやすい内容になります。

まずは、transform-style:3dにて、3Dの設定する動画です。


つづけて、より遠近感を高めるため、遠近法 perspectiveを設定します。

CSSをある程度マスターしていたら、簡単に3Dが出来てしまいます。

HTML5 CSSで3Dを表現する
●ソース1
<!DOCTYPE html>
<html lang="ja">
<meta charset=utf-8>
<div class="shiten">
<div class="box">
<div class="front"></div>
<div class="back"></div>
<div class="right"></div>
</div>
</div>
<style>
.shiten{ position:relative; -webkit-perspective: 500; }
.box { transform-style: preserve-3d; position:relative; transition:all 1s; width:100px;
height:100px; margin:0 auto;}
.box div{ position:absolute; width:100px; height:100px; border:1px solid; }
.front{ transform:translateZ(50px); }
.back{ transform:translateZ(-50px); }
.right{ transform:translateX(50px) rotateY(90deg); }
.box:hover{ transform:rotateY(90deg); }
</style>