css3-3D-Box

続・cssで3D Box(立体図形)を作り、さらに回転させる。

cssで3D Box(立体図形)を作り、さらに回転させる。
2013-11-08の勉強会でやった事をまとめました。
2013-11-08の勉強会

の続編です。

今度は、回転の際に遠近感を出す方法です。cssのperspectiveを使います。現在はプロパティでも値でもあるようです。そのうち統一されるのかな?
サンプルかこちら↓
http://nobu-69.com/others.html
上記のサイトに行きましたら”cssで3D BOXを作る。さらにhoverで回転。 2013/11/08″をクリックして下さい。

【1つ質問】
perspectiveを指定すると表示画像の大きさが変わってしまうのはなぜですか?

カテゴリー: 勉強会 | タグ: , | 投稿日: | 投稿者:
真中のぶ

真中のぶ について

The B.B.BoogieというバンドでVocalをしています。サーフィンもします。シングルフィンのクラッシックなロングボードに乗っています。ウェブデザイナーでもあります。タカハシ先生の一番弟子ですが時々すっとこどっこいな質問をして校庭10周と言われます。「パソコン倶楽部りんご」は僕が命名しました。ジョブズさんに敬意を表して。好きなcssはmargin{0 auto;}

続・cssで3D Box(立体図形)を作り、さらに回転させる。」への3件のフィードバック

  1. タカハシ先生タカハシ先生

    変形の基準点は箱の中心にあります。
    手前の面は大きく、奥の面は小さくなります。
    手前の面しか見えていないと、平面的には拡大されたように見えます。
    各面をopacityで透かせると分かりやすいです。

    返信
    1. 真中のぶ真中のぶ 投稿作成者

      opacityで透かしてみました。
      なるほど。理解しました。
      写真などの画像を使う場合は、拡大や縮小されるので
      画像が荒くなったりしてしまうのはしょうがないんですね。

      返信
      1. タカハシ先生タカハシ先生

        >画像が荒くなったりしてしまうのはしょうがないんですね。
        jpgなら最大サイズに合わせた、大きめの画像を使う。
        もちろん、svgなら拡大しても荒れないです。

        返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


This site uses Akismet to reduce spam. Learn how your comment data is processed.