文字の画像(イメージ)化
cman.jp cman.jp > パーツ作成メニュー > 画像のデザイン > 3D画像の回転

3D画像回転のCSS生成

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

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

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

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

3D画像を回転させ見よう

回転速度
回転方向
1
6
3
4
5
2
使用した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
広告
広告

色々な3D画像回転

マウスオーバーで3D画像を回転

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

1
6
3
4
5
2
<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>

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

ページTOP

写真付3D画像の回転

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

<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>

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

ページTOP

注意事項

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

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

ページTOP
広告

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

広告
ページTOP

当サイト内の関連するページ

広告
QrCode
このページのURL
スマートフォン・タブレット
運営:株式会社シーマン