質問編集履歴
1
本文 試したこと
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
codepenによるcssサンプルについてタブレットの縦方向で下半分が表示される原因
|
|
1
|
+
codepenによるcssサンプルについてタブレットの縦方向で下半分が表示される原因
|
body
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
### 前提・実現したいこと
|
|
2
2
|
|
|
3
3
|
CSS初心者です。
|
|
4
|
-
下記URLのcodepenによるサンプル「CSS のみでページを開くときのオープニングシャッターアニメーションを表現してみる」を実際サーバーにアップしたところ、パソコンとタブレットの横向きでは問題なくサンプル通り表現されますが、タブレットの縦向きではメインのページコンテンツが上半分はシャッターにて非表示にはなりますが、下半分が背面に移動せず表示され
|
|
4
|
+
下記URLのcodepenによるサンプル「CSS のみでページを開くときのオープニングシャッターアニメーションを表現してみる」を実際サーバーにアップして試したところ、パソコンとタブレットの横向きでは問題なくサンプル通り表現されますが、タブレットの縦向きではメインのページコンテンツが上半分はシャッターにて非表示にはなりますが、下半分が背面に移動せず表示されたままです。完全に全体が非表示にするコードを教えてください。
|
|
5
5
|
|
|
6
|
-
ページが下から起き上がる感じですが、実際はタブレットのように縦向きにするとページの中心部分から中折れしているので下半分が－15度手前に表示され
|
|
6
|
+
ページが下から起き上がる感じですが、実際はタブレットのように縦向きにするとページの中心部分から中折れしているので下半分が－15度手前に表示された状態です。下記のコード部分を変更してみたのですがだめでした。
|
|
7
|
-
perspective(800px) scale(0.9) rotateX(15deg)
|
|
7
|
+
transform: perspective(800px) scale(0.9) rotateX(15deg)
|
|
8
8
|
他の動作には問題は有りません。
|
|
9
9
|
宜しくお願いします。
|
|
10
10
|
https://digipress.info/tech/opening-loading-shutter-with-pure-css/
|
|
@@ -13,10 +13,7 @@
|
|
|
13
13
|
ブラウザ Chrome
|
|
14
14
|
タブレット Ipad
|
|
15
15
|
|
|
16
|
-
### 発生している問題・エラーメッセージ
|
|
17
16
|
|
|
18
|
-
有りません
|
|
19
|
-
|
|
20
17
|
### 該当のソースコード
|
|
21
18
|
body {
|
|
22
19
|
background-color: #fafafa;
|
|
@@ -185,8 +182,4 @@
|
|
|
185
182
|
|
|
186
183
|
### 試したこと
|
|
187
184
|
|
|
188
|
-
|
|
185
|
+
transform: bottom scale(0.9) rotateX(15deg);
|
|
189
|
-
|
|
190
|
-
### 補足情報（FW/ツールのバージョンなど）
|
|
191
|
-
|
|
192
|
-
ここにより詳細な情報を記載してください。
|