CSSを利用した３Dの立方体を作成する
2021年7月2日今回は、CSSを利用した３Dの作成をしていきます。
ある程度CSSをマスターしている方は非常に分かりやすい内容になります。
まずは、transform-style:3dにて、３Dの設定する動画です。
つづけて、より遠近感を高めるため、遠近法 perspectiveを設定します。
CSSをある程度マスターしていたら、簡単に３Dが出来てしまいます。
HTML5 CSSで３Dを表現する
●ソース１
<!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>関連サイト
パソコン教室
パソコン修理・販売・買取・サポート
