回転＋テキスト（X 軸） | 動くWebデザインアイディア帳

画像リンクの動き
-回転＋テキスト（X 軸）-

デモページを見る

See the Pen 7-16 回転＋テキスト（X軸） by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.

「Result」内の表示を確かめてね！

動きを実現する仕組み

背景色がついた画像と同じ大きさのテキストのエリアが、hoverをすると0.35秒かけてX軸（縦軸）に回転しながら透過0→出現。
hoverをすると画像がX軸（縦軸）に回転し、透過0になる。

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/7-16.css">
</head>

body内の画像リンクを表示させたい場所に以下のHTMLを記載します。

<div class="flipX"><a href="#"><img src="img/02.jpg" alt=""><span class="cap">回転X軸＋テキストが出現 flipX</span></a></div>

自作のCSS内の書き方

/* 回転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;/*移り変わる速さを変更したい場合はこの数値を変更*/
}