See the Pen
マウスホバーで裏返るカード型リンク by チータツ (@cheese_fuji)
on CodePen.
マウスホバーでくるっと回転して、表裏で別々の情報を見せるカード型のリンクです。プロフィールや商品紹介などに使用できます。
なお、リンクにしたくない場合は、親要素をdivに変更してください。
CSSの解説
コードを見る
余計な装飾を省いています。
<a href="#" class="rv-card" ontouchstart="">
<div class="front-card"> <!--前面-->
<div class="front-inner">
<!-- ここに前面の内容 -->
</div>
</div>
<div class="back-card"> <!--背面-->
<div class="back-inner">
<!-- ここに背面の内容 -->
</div>
</div>
</a>
/***********************
カード全体（親）
***********************/
.rv-card{
position: relative; /*子要素の基点*/
display: block;
width: 200px;
height: 200px;
transform-style: preserve-3d; /*3D化*/
transition: 1.2s ease-in-out;
box-shadow: 0 14px 16px -10px rgba(0,0,0,25%);
color: inherit; /*リンク色無効*/
text-decoration: none; /*リンク下線なし*/
}
/*ホバー時*/
.rv-card:hover{
transform: rotateY(180deg); /*裏表反転*/
}
/*************************
カード
*************************/
/* 表裏共通 */
.front-card, .back-card{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
text-align: center;
backface-visibility: hidden; /*裏向きを非表示*/
-webkit-backface-visibility: hidden;
}
/* 表のカード */
.front-card{
background: #eee; /*背景色*/
}
/* 裏のカード */
.back-card{
transform: rotateY(180deg); /*裏に配置*/
background: #ABE0FF; /*背景*/
}
/*****************************
カードの中身
*****************************/
/*裏表共通*/
.front-inner, .back-inner{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%); /*中央*/
width: 100%; /*幅*/
padding: 0.5em;
box-sizing: border-box;
}
/*表面*/
.front-inner{
font-weight: bold; /*太字*/
}
/*裏面*/
.back-inner{
color: white; /*文字色*/
font-size: 15px; /*文字サイズ*/
text-shadow: 0px 0px 4px rgba(0,0,0,50%); /*文字の影*/
}
隠しておきたい要素はtransform: rotateY(180deg)で背面にして、backface-visibility: hiddenで背面の要素を非表示に。ホバー時には全体をtransform: rotateY(180deg)で180度回転させて、表裏を反転させるという仕組みになっています。
| transform: rotateY(180deg) | 180度横方向に回転
表と裏を反転させるのに使用 |
| backface-visibility: hidden | 後ろを向いている（180度回転している）要素を非表示にする
子要素（表裏の要素）に指定 |
| transform-style: preserve-3D | transformによる動き（回転）を3D表現にする
親要素に指定 |
応用CSS
背景画像付きカード
表側に背景画像を設定したものです。
疑似要素 .front-card:before で背景画像用のフィルターを作成しているので、文字色や画像の色合いに応じてフィルターの色を調整してください。
See the Pen
マウスホバーで裏返るカード型リンク（背景画像付き） by チータツ (@cheese_fuji)
on CodePen.
コードを見る
HTMLは同じです。
/***********************
カード全体（親）
***********************/
.rv-card{
position: relative; /*子要素の基点*/
display: block;
width: 200px;
height: 200px;
transform-style: preserve-3d; /*3D化*/
transition: 1.2s ease-in-out;
box-shadow: 0 14px 16px -10px rgba(0,0,0,25%);
color: inherit; /*リンク色無効*/
text-decoration: none; /*リンク下線なし*/
}
/*ホバー時*/
.rv-card:hover{
transform: rotateY(180deg); /*裏表反転*/
}
/*************************
カード
*************************/
/* 表裏共通 */
.front-card, .back-card{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
text-align: center;
backface-visibility: hidden; /*裏向きを非表示*/
-webkit-backface-visibility: hidden;
}
/* 表のカード */
.front-card{
background-image: url(""); /*背景画像*/
background-size: cover; /*要素サイズに*/
}
/*表のカードのフィルター*/
.front-card:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black; /*フィルター色*/
opacity: 0.5; /*フィルターの濃さ*/
}
/* 裏のカード */
.back-card{
transform: rotateY(180deg); /*裏に配置*/
background: #7B2A0B; /*背景*/
}
/*****************************
カードの中身
*****************************/
/*裏表共通*/
.front-inner, .back-inner{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%); /*中央*/
width: 100%; /*幅*/
padding: 0.5em;
box-sizing: border-box;
}
/*表面*/
.front-inner{
font-weight: bold; /*太字*/
color: white; /*文字色*/
}
/*裏面*/
.back-inner{
color: white; /*文字色*/
font-size: 15px; /*文字サイズ*/
text-shadow: 0px 0px 4px rgba(0,0,0,50%); /*文字の影*/
}
丸いカード
border-radiusを使って円形にしたものです。
中央から上下に行くにつれて横幅が狭くなってしまうためあまり改行ができず、長い文章を表示するのには向いていません。
See the Pen
マウスホバーで裏返る丸いカード型リンク by チータツ (@cheese_fuji)
on CodePen.
コードを見る
HTMLは同じです。
/***********************
カード全体（親）
***********************/
.rv-card{
position: relative; /*子要素の基点*/
display: block;
width: 300px; /*幅*/
height: 300px; /*高さ*/
border-radius: 50%; /*円形にする*/
transform-style: preserve-3d; /*3D化*/
transition: 1.2s ease-in-out;
box-shadow: 0 14px 16px -10px rgba(0,0,0,25%);
color: inherit; /*リンク色無効*/
text-decoration: none; /*リンク下線なし*/
}
/*ホバー時*/
.rv-card:hover{
transform: rotateY(180deg); /*裏表反転*/
}
/*************************
カード
*************************/
/* 表裏共通 */
.front-card, .back-card{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
padding: 10px;
box-sizing: border-box;
text-align: center;
backface-visibility: hidden; /*裏向きを非表示*/
-webkit-backface-visibility: hidden;
}
/* 表のカード */
.front-card{
background: #eee; /*背景*/
}
/* 裏のカード */
.back-card{
transform: rotateY(180deg); /*裏に配置*/
background: #ABE0FF; /*背景*/
}
/****************************
カードの中身
****************************/
/*表裏共通*/
.front-inner, .back-inner{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%); /*中央*/
width: 250px; /*幅*/
}
/*表*/
.front-inner{
font-weight: bold; /*太字*/
}
/*裏*/
.back-inner{
color: white; /*文字色*/
font-size: 15px; /*文字サイズ*/
text-shadow: 0px 0px 4px rgba(0,0,0,50%); /*文字の影*/
}
丸いカード（背景画像付き）
円形のカードの前面を背景画像仕様にしたものです。
See the Pen
マウスホバーで裏返る丸いカード型リンク（背景画像付き） by チータツ (@cheese_fuji)
on CodePen.
コードを見る
HTMLは同じです。
/***********************
カード全体（親）
***********************/
.rv-card{
position: relative; /*子要素の基点*/
display: block;
width: 300px; /*幅*/
height: 300px; /*高さ*/
border-radius: 50%; /*円形にする*/
transform-style: preserve-3d; /*3D化*/
transition: 1.2s ease-in-out;
box-shadow: 0 14px 16px -10px rgba(0,0,0,25%);
color: inherit; /*リンク色無効*/
text-decoration: none; /*リンク下線なし*/
}
/*ホバー時*/
.rv-card:hover{
transform: rotateY(180deg); /*裏表反転*/
}
/*************************
カード
*************************/
/* 表裏共通 */
.front-card, .back-card{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
padding: 10px;
box-sizing: border-box;
text-align: center;
backface-visibility: hidden; /*裏向きを非表示*/
-webkit-backface-visibility: hidden;
}
/* 表のカード */
.front-card{
background: #eee; /*背景*/
background-image: url("https://give-shot.jp/tokyocss/wp-content/uploads/2022/04/road-1072823_1280.jpg"); /*背景画像*/
background-size: cover; /*要素に合わせる*/
}
/*表のフィルター*/
.front-card:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background: black; /*フィルター色*/
opacity: 0.2; /*フィルターの濃さ*/
}
/* 裏のカード */
.back-card{
transform: rotateY(180deg); /*裏に配置*/
background: #983010; /*背景*/
}
/****************************
カードの中身
****************************/
/*表裏共通*/
.front-inner, .back-inner{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%); /*中央*/
width: 250px; /*幅*/
}
/*表*/
.front-inner{
font-weight: bold; /*太字*/
color: white;
}
/*裏*/
.back-inner{
color: white; /*文字色*/
font-size: 15px; /*文字サイズ*/
text-shadow: 0px 0px 4px rgba(0,0,0,50%); /*文字の影*/
}
