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

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

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

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

HTML5

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

287閲覧

CSSでフリップアニメーションをした際に、フリップした側のテキストが消えてしまう。

YutaOkuma

総合スコア15

CSS3

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

HTML5

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/10/18 21:54

前提・実現したいこと

HTMLとCSSを使ってソーシャルメディアアイコンのフリップカードを作成しています。表側にはソーシャルメディアアイコン、裏側にはそのメディア名が記述されており、カーソルを合わせると回転(フリップ)する仕組みになっています。

発生している問題・エラーメッセージ

最後の段階で、フリップした裏側にテキストが表示されるのですが、どうしてかアニメーション後に消えてしまいます。

該当のソースコード

html

1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="utf-8"> 5 <title>Flip Card Effect</title> 6 <link rel="stylesheet" href="css/styles.css"> 7 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous"> 8</head> 9<body> 10 <div class="cardBox"> 11 <div class="card facebook"> 12 <div class="card-front facebook"><i class="fab fa-facebook-f"></i></div> 13 <div class="card-back facebook">Facebook</div> 14 </div> 15 </div> 16 <div class="cardBox"> 17 <div class="card twitter"> 18 <div class="card-front twitter"><i class="fab fa-twitter"></i></div> 19 <div class="card-back twitter">Twitter</div> 20 </div> 21 </div> 22 <div class="cardBox"> 23 <div class="card googleplus"> 24 <div class="card-front googleplus"><i class="fab fa-google-plus-g"></i></div> 25 <div class="card-back googleplus">Google+</div> 26 </div> 27 </div> 28</body> 29</html>

css

1body { 2 background: #292929; 3 align-items: center; 4 display: flex; 5 justify-content: center; 6 font-family: arial; 7 height: 100vh; 8} 9 10.cardBox { 11 perspective: 500px; 12 margin: 15px; 13} 14 15.card { 16 position: relative; 17 width: 150px; 18 height: 150px; 19 background: #fff; 20 transform-style: preserve-3d; 21 transition: .5s ease; 22 box-shadow: 0 30px 30px rgba(0, 0, 0, .5); 23} 24 25.facebook { 26 background: #3b5998; 27} 28 29.twitter { 30 background: #00aced; 31} 32 33.googleplus { 34 background: #dd4b39; 35} 36 37.card-front, .card-back { 38 position: absolute; 39 top: 0; 40 left: 0; 41 width: 150px; 42 height: 150px; 43 color: #fff; 44 backface-visibility: hidden; 45} 46 47.card-front { 48 display: flex; 49 font-size: 40px; 50 justify-content: center; 51 align-items: center; 52 z-index: 2; 53} 54 55.card-back { 56 display: flex; 57 font-size: 30px; 58 justify-content: center; 59 align-items: center; 60} 61 62.cardBox:hover .card { 63 transform: rotateY(180deg); 64} 65 66.card-back { 67 transform: rotateY(180deg); 68}

補足情報

フリップ時にはテキストは表示されているので、あと一歩のところだと思います。どうかわかる方いましたらお答えいただければと思います。

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

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

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

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

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

guest

回答2

0

ベストアンサー

あー。なんか惜しいですね。
未検証なんで、アレですが、ひっくり返った時に、最終的に.card-frontの裏面が前に出てきているような気がします。
z-indexあたりかなぁ。

--------追記-----
最終的に、こうなると美しいかも  

CSS

1body { 2 background: #292929; 3 align-items: center; 4 display: flex; 5 justify-content: center; 6 font-family: arial; 7 height: 100vh; 8} 9 10.cardBox { 11 perspective: 500px; 12 margin: 15px; 13} 14 15.card { 16 position: relative; 17 width: 150px; 18 height: 150px; 19 background: #fff; 20 transform-style: preserve-3d; 21 transition: .5s ease; 22 box-shadow: 0 30px 30px rgba(0, 0, 0, .5); 23 backface-visibility: hidden;/*追加*/ 24} 25 26.facebook { 27 background: #3b5998; 28} 29 30.twitter { 31 background: #00aced; 32} 33 34.googleplus { 35 background: #dd4b39; 36} 37 38.card-front, .card-back { 39 position: absolute; 40 top: 0; 41 left: 0; 42 width: 150px; 43 height: 150px; 44 color: #fff; 45 /*backface-visibility: hidden;*//*.cardに移動*/ 46} 47 48.card-front { 49 display: flex; 50 font-size: 40px; 51 justify-content: center; 52 align-items: center; 53 /*z-index: 2;*/ 54} 55 56.card-back { 57 display: flex; 58 font-size: 30px; 59 justify-content: center; 60 align-items: center; 61 backface-visibility: hidden;/*これ追加*/ 62 box-shadow: 0 30px 30px rgba(0, 0, 0, .5);/*これ追加*/ 63} 64 65.cardBox:hover .card { 66 transform: rotateY(180deg); 67} 68 69.card-back { 70 transform: rotateY(180deg); 71}

投稿2018/10/19 01:26

編集2018/10/19 10:26
colling

総合スコア798

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

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

YutaOkuma

2018/10/19 07:15

ご回答ありがとうございます。この方法で裏面のテキストが表示されるようになりました!
colling

2018/10/19 10:24

あ、裏向いた時の影忘れてた! .card-back に box-shadow: 0 30px 30px rgba(0, 0, 0, .5); も付け足した方が良さげ、、。
colling

2018/10/19 10:25

編集しておきますね
guest

0

backface-visibility: hidden;を.cardの設定に移動すればいけるような気がします

CSS

1.card { 2 position: relative; 3 width: 150px; 4 height: 150px; 5 background: #fff; 6 transform-style: preserve-3d; 7 transition: .5s ease; 8 box-shadow: 0 30px 30px rgba(0, 0, 0, .5); 9 backface-visibility: hidden;    /* ここに移動 */ 10}

投稿2018/10/19 00:46

miyakichi

総合スコア297

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

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

colling

2018/10/19 01:30 編集

ああ。そうすね。 このbackface-visibility: hiddenの場所と、z-indexの両方かな
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問