<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet">
<style>@charset "utf-8";
/* 回転X軸
----------------------------- */
.flipX a {
/*テキストの基点となる位置を定義*/
position: relative;
display: block;
}
.flipX img {
transition: all 0.35s ease; /*移り変わる速さを変更したい場合はこの数値を変更*/
backface-visibility: hidden; /*三次元になった際に裏面を可視化させない*/
}
.flipX a:hover img {
/*hoverした時の変化*/
transform: rotateX(-180deg); /*縦軸に回転*/
opacity: 0;
}
.flipX span.cap {
/*ここからエリアの絶対配置の指定*/
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
/*ここまでエリアの絶対配置の指定*/
transition: all 0.35s ease; /*移り変わる速さを変更したい場合はこの数値を変更*/
transform: rotateX(90deg); /*縦軸に回転*/
transform-origin: 0% 50%; /*回転する基点*/
opacity: 0;
background: #333; /*背景色*/
color: #fff; /*テキストの色を変えたい場合はここを修正*/
/*ここからテキスト中央寄せの指定*/
display: flex;
justify-content: center;
align-items: center;
/*ここまでテキスト中央寄せの指定*/
}
.flipX a:hover span.cap {
/*hoverした時の変化*/
transform: rotateX(0);
opacity: 1;
transition-delay: 0.15s; /*移り変わる速さを変更したい場合はこの数値を変更*/
}
/*========= レイアウトのためのCSS ===============*/
a {
color: #333;
text-decoration: none;
}
.lead {
text-align: center;
padding: 50px 20px;
}
/*画像のレスポンシブ*/
img {
width: 100%;
height: auto;
}
/*横幅*/
.flipX {
width: 70%;
margin: 30px auto; /*中央揃え*/
}</style>
</head>
<body>
<body>
<div class="flipX">
<a href="#">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/tits.jpg" alt="">
<span class="cap">回転X軸＋テキストが出現 flipX</span>
</a>
</div>
<script>
</script>
</body>
</html>