質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

2回答

1196閲覧

CSS3についての質問

hajimete

総合スコア41

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

1クリップ

投稿2017/09/25 14:04

編集2017/09/26 02:06

###前提・実現したいこと
z-indexでの順番を時計回りに表示して最後の順番だけ入れ替えたいです。

###該当のソースコード

css3

1<div class="main__box"> 2 <div class="main__8">8</div> 3 <div class="main__5">5</div> 4 <div class="main__1">1</div> 5 <div class="main__7">7</div> 6 <div class="main__4">4</div> 7 <div class="main__6">6</div> 8 <div class="main__2">2</div> 9 <div class="main__3">3</div> 10 <div class="main__9">9</div> 11 </div> 12 13.main__1 { 14 width: 100px; 15 height: 100px; 16 background-color: #ffefd3; 17 margin: 40px 0 0 200px; 18 position: absolute; 19 top: 180px; 20 left: 390px; 21 z-index: 1; 22} 23 24.main__2 { 25 width: 100px; 26 height: 100px; 27 background-color: #7084de; 28 position: absolute; 29 top: 300px; 30 left: 670px; 31 z-index: 2; 32} 33 34.main__3 { 35 width: 100px; 36 height: 100px; 37 background-color: #d0ecea; 38 position: absolute; 39 top: 380px; 40 left: 750px; 41 z-index: 3; 42} 43 44.main__4 { 45 width: 100px; 46 height: 100px; 47 background-color: #8b7a5e; 48 position: absolute; 49 top: 460px; 50 left: 670px; 51 z-index: 4; 52} 53 54.main__5 { 55 width: 100px; 56 height: 100px; 57 background-color: #9fd6d2; 58 position: absolute; 59 top: 540px; 60 left: 590px; 61 z-index: 5; 62} 63 64.main__6 { 65 width: 100px; 66 height: 100px; 67 background-color: #fffee4; 68 position: absolute; 69 top: 460px; 70 left: 510px; 71 z-index: 6; 72} 73 74.main__7 { 75 width: 100px; 76 height: 100px; 77 background-color: #deae70; 78 position: absolute; 79 top: 380px; 80 left: 430px; 81 z-index: 7; 82} 83 84.main__8 { 85 width: 100px; 86 height: 100px; 87 background-color: #de70cf; 88 position: absolute; 89 top: 300px; 90 left: 510px; 91 z-index: 8; 92}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

HTML

1<div class="main__box"> 2 <div class="main__1">1</div> 3 <div class="main__2">2</div> 4 <div class="main__3">3</div> 5 <div class="main__4">4</div> 6 <div class="main__5">5</div> 7 <div class="main__6">6</div> 8 <div class="main__7">7</div> 9 <div class="main__8">8</div> 10</div>

CSS

1.main__box { 2 transform-style: preserve-3d; 3} 4 5.main__8 { 6 transform: rotateX(1grad) rotateY(1grad); 7 /* z-index不要 */ 8}

transform-style: preserve-3d;を使うことで、3D空間に配置できます。

transform-style
https://developer.mozilla.org/ja/docs/Web/CSS/transform-style

IEはNG
http://caniuse.com/#search=transform-style

投稿2017/09/26 01:17

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

私の場合、9個目の小さな正方形を作って最後の正方形の角の上に重ねるようなことはしたことありますが、下に回りこますことができるのかどうかか、私もこれ可能なら知りたいです。又は、8番目の正方形を半分に分割し、2つにして、片方を下に回りこますようなこともできます。

投稿2017/09/25 14:29

編集2017/09/25 14:33
xjaPANDA

総合スコア124

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問