cman.jp > パーツ作成メニュー > 画像のデザイン > ３Ｄ画像の回転

３Ｄ画像回転のCSS生成

３Ｄ画像（立体）の回転は、平面画像と同様に、CSS3で追加された「animetion」を利用すると、簡単にできます。

当ページでは、簡単な操作で３Ｄ画像回転のCSSを自動で作成できます。「横軸回転」「縦軸回転」「時計回り」「反時計回り」に対応しています。各回転の組み合わせも簡単に確認できますので、是非お試しください。

当ページのサンプル画像は、３Ｄ（立体）の見易さを考慮し、「transform: rotate」で、始点・終点を傾き指定をしています。

３Ｄ画像の表示は、「transform-style: preserve-3d」を指定します。
「transform-style」は、古いブラウザや一部ブラウザでは動作しません。
未対応のブラウザでは、正しく表示されません。

３Ｄ画像を回転させ見よう

回転速度

回転方向

横軸縦軸時計反時計

使用したhtml

<div class="css-cube">
<div class="css-face css-forward">1</div>
<div class="css-face css-reverse">6</div>
<div class="css-face css-right">3</div>
<div class="css-face css-left">4</div>
<div class="css-face css-top">5</div>
<div class="css-face css-bottom">2</div>
</div>

生成したCSS

<style type="text/css">
.css-cube {
  animation: cubeAnime 2s linear infinite;
;
}
@keyframes cubeAnime {
   50% {transform: rotateY(-30deg) rotateX(-30deg) rotateZ(10deg);}
  100% {transform: rotateY(330deg) rotateX(330deg) rotateZ(-350deg);}
}
</style>

「animation」の使い方は以下を参照ください。
animation 「アニメーション」の構文

ページTOP

色々な３Ｄ画像回転

マウスオーバーで３Ｄ画像を回転

立体にマウスを乗せると回転します。

<div class="css-hover">
<div class="css-face css-forward">1</div>
<div class="css-face css-reverse">6</div>
<div class="css-face css-right">3</div>
<div class="css-face css-left">4</div>
<div class="css-face css-top">5</div>
<div class="css-face css-bottom">2</div>
</div>

<style type="text/css">
.css-hover:hover {                                /* 横軸方向に回転 */
  transform:rotateY(-30deg) rotateX(330deg) rotateZ(10deg);
}
.css-hover {
  width: 100px;
  height: 100px;
  margin: 5%;
  border: none;
  transform-style: preserve-3d;
  transform:rotateY(-30deg) rotateX(-30deg) rotateZ(10deg);
  transition:all 3s;                              /* 回転の速度 */
  display : inline-block;
}
</style>

※その他のＣＳＳ指定は、上記生成したＣＳＳと同様のため省略。

ページTOP

写真付３Ｄ画像の回転

立体の各面に素材を指定できます。写真付３Ｄ画像もマウスを乗せると回転します。

<div class="css-hover2">
<div class="css-img css-forward"><img src="fine.png" width="100" height="100"></div>
<div class="css-img css-reverse"><img src="cloud.png" width="100" height="100"></div>
<div class="css-img css-right"><img src="rain.png" width="100" height="100"></div>
<div class="css-img css-left"><img src="thunder.png" width="100" height="100"></div>
<div class="css-img css-top"><img src="snow.png" width="100" height="100"></div>
<div class="css-img css-bottom"><img src="star.png" width="100" height="100"></div>
</div>

<style type="text/css">
.css-hover2:hover {                             /* 横軸・縦軸・時計方向に回転 */
  transform:rotateY(330deg) rotateX(330deg) rotateZ(370deg);
}
.css-img {                                      /* 各面の指定 */
  position: absolute;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  line-height: 100px;
  font-size: 50px;
  color: black;
  text-align: center;
  backface-visibility : hidden;                 /* 裏面は非表示 */
}
</style>

※その他のＣＳＳ指定は、マウスオーバーのＣＳＳと同様のため省略。

ページTOP

注意事項

CSSの「animation」を使用しています。「animation」は、古いブラウザや一部ブラウザでは動作しません。

「animation」の使い方は以下を参照ください。
animation 「アニメーション」

ページTOP

生成できるホームページ・パーツ一覧
	文字のデザイン
	画像のデザイン
	ボタンのデザイン
	入力項目のデザイン
	テーブルのデザイン
	BOXのデザイン
	吹き出しのデザイン
	ページのデザイン
	図形のデザイン
ご利用時の注意事項・制約事項
よくあるご質問
	何で無料なの？
	生成コードに利用制限はある？
	生成コードに保証はある？
	jQueryで生成できない？