【jQuery】奥へ行く

CSS,jQuery

まだこんなことやってる

なんかさぁ

ダサくない？みんなして下へ下へ行っちゃってさぁ。たまに変わってるのあったかと思えば右。そうじゃないんだよなぁ。おれは違う。おれは奥へ行くぜ！

See the Pen
rNMwZNz by AtsushiNakata (@nakata999)
on CodePen.

めちゃめちゃ見づらい。画面の幅が狭いと文章なんか読めたもんじゃない。ナマイキ言ってすいませんでした。でもなにか可能性を感じますね。

解説

body {
  （略）
  transform-style: preserve-3d;
  perspective: 600px;
}
.screen {
  （略）
  transform-style: preserve-3d;
}

3Dで表現したい要素の親要素に"transform-style: preserve-3d"を指定します。こうしないと親要素にペタっと平面的にくっついてしまいます。このプロパティは継承されないので、3Dの子要素(“.left"と".right")を持つ".screen"にも指定する必要があります。

.controller div {
  （略）
  user-select: none;
}

次は「進む」と「戻る」ボタンの説明です。スマホで操作するときに、長押ししてると「進む」「戻る」のテキストが選択されてしまい、指を離してもずっとタッチしてる状態になってしまいました。これは"user-select"プロパティに"none"を指定することで解決。

あとがき

やっぱりこのままだと使えませんね。でも「奥行き」を使うことは悪くないような気もします。もうちょっと色々と考えてみます。ありがとうございました。

おしゃれ度

★★★☆☆

Posted by ナカタ