前提・実現したいこと
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}
補足情報
フリップ時にはテキストは表示されているので、あと一歩のところだと思います。どうかわかる方いましたらお答えいただければと思います。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/19 07:15
2018/10/19 10:24
2018/10/19 10:25