ルディの脳内ブログルディの脳内ブログ趣味の釣りや一人旅。それから現在勉強中のWEB関係について書いているブログです。潰れた状態で表示されてしまいます。その他のブラウザ(最新バージョン)では、ベンダープレフィックスを指定することなく表示できます!開発者ツールなどで色々いじってみて下さい!まずはサイコロの展開図を作っていきます!このようなサイコロの展開図的なものを作らずにいきなり作っていくことも出来るのですが、このようにして作成していった方がtransformプロパティの動作をイメージしやすいと思います。親要素の中に6つの子要素を入れていきます。HTMLの記述はこのようになっています。default"></div></div></div></body>親要素rectの中に立体を形作る子要素を6つ入れていきます。100px;}親要素であるrectにはサイズ指定やborderは必要ないのですが、作業しやすいように指定しています。(完成後に指定を取り除いていきます。)立体のパーツとなるそれぞれのdivにクラス名defaultでサイズとposition:absoluteの指定を入れておきます。rect_partではそれぞれtopとleftの指定によって展開図と同じ位置になるようにします。立体構造が分かりやすいように色指定をhslaで指定し、透明度を入れています。transformでこれを折り曲げていきます!(分かりやすいようにクラス名を表示しています。上のdiv(rect_part1)から変形をおこなっていきます。画像の矢印の位置(borderで赤く目印を付けてあります)を基準に変形させたいので、transform-originをbottomに指定します。することによって赤いborder部分を基準にtransformの変形を適用させることができます。ここでは、X軸(横方向の軸)方向に90°回転させますので、transform:rotateX(-90deg)をCSSに追加します。変形させるとこんな感じ!X軸を基準にペコっと90°回転したのでこのままだと消えたように見えます。残念ながらこのプロパティがIEに対応しておらず、潰れて表示されてしまう原因です。真正面から見えている要素に対しての視点の位置を変えてあげるプロパティです。50%です)この数値を変えて色んな視点にしてみるとまた違った発見がありますので好みの位置に変えてみて下さい!プロパティを付け加えると・・・。}最後に残った一つはtranslateで移動させます!最後にポツンと一つだけ取り残されたdiv(rect_part6)は、rotateで回転ではなく、translateで移動してはめ込んでいきます!視点を変えるとわかりやすくなります!視点を変えてみると、はめ込む位置まで縦方向(Y軸)と奥行き(Z軸)を調節しなければならないことがわかります。親要素#rectのborder,width,heightの指定は必要ありませんので、お好みで削除してしまってください!(widthとheightは残っていても問題ありません。)※widthとheightを0にして親要素のサイズをなくすと位置が少しずれてしまいます。色んな指定をしてみると面白いですよ!最終的にCSSの記述はこのようになります!(animationも付け加えてあります。translateY(-200px);}これを応用すればこんなことも出来ちゃいます!(僕のポートフォリオサイトのトップページです!)以上、CSSで作る3D立体の作成手順でした!スポンサードリンクTweetあわせて読みたい記事positionを使ったCSSのみで実装するスライドショー。Textのインストール方法。SublimeTextの日本語化の手順。ディレクトリ内にある最新のCSVファイルを読み込む。要素に合わせて高さを調整する(クリック式スライドショー➁)。jQuery技術➀-➁。要素の表示・非表示を判定する。新幹線で行くスノボーツアーを初めて利用してみた!上越国際スキー場へ(新潟県)ディレクトリ内にある最新のCSVファイルを読み込む。コメントをキャンセルメールアドレスが公開されることはありません。名前:ルディ元消防設備士で、現在はWEBクリエイター。きな趣味がありすぎて忙しい毎日を過ごしております。powershell...headタグ内のmeta情報を取得・書き換えを行う。Javascript・jQuery!要素の表示・非表示を判定する。javascript・jQuery!要素に合わせて高さを調整する(クリック式スライドショー➁)。jQuery技術➀-➁。(第一弾)!ポイント探しに一苦労。ディレクトリ内にある最新のCSVファイルを読み込む。PHP初心者日記!3Dの立体をCSSのみで作る!CSSテクニック!新幹線で行くスノボーツアーを初めて利用してみた!上越国際スキー場へ(新潟県)加計呂麻島、フェリーでわずか30分で行けちゃう絶景の島!(アクセス編)綾瀬川、シーバスポイント開拓日記。ブログランキングへ最近のコメント喉が真っ白でかなり焦った。強烈な喉の痛みと高熱が出る扁桃炎体験記。喉が真っ白でかなり焦った。強烈な喉の痛みと高熱が出る扁桃炎体験記。喉が真っ白でかなり焦った。強烈な喉の痛みと高熱が出る扁桃炎体験記。WordPress.com.。