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

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

デモページを見る

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

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

動きを実現する仕組み

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

HTMLの書き方

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

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

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

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

自作のCSS内の書き方

/* 回転Z軸1
   ----------------------------- */

.flipZ1 a{/*テキストの基点となる位置を定義*/
  position: relative;
  display: block;
}

.flipZ1 img {
  transition: all 0.35s ease;/*移り変わる速さを変更したい場合はこの数値を変更*/
  backface-visibility: hidden;/*三次元になった際に裏面を可視化させない*/
}

.flipZ1 a:hover img {/*hoverした時の変化*/
  transform: rotate3d(-1, 1, 0, 100deg);/*奥行きをもたせて回転*/
  opacity: 0;
}

.flipZ1 span.cap {
/*ここからエリアの絶対配置の指定*/
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
/*ここまでエリアの絶対配置の指定*/
transition: all 0.35s ease;/*移り変わる速さを変更したい場合はこの数値を変更*/
  transform: rotate3d(1, -1, 0, 100deg);/*奥行きをもたせて回転*/
  opacity: 0;
  background:#333;/*背景色*/
  color: #fff;/*テキストの色を変えたい場合はここを修正*/
	/*ここからテキスト中央寄せの指定*/
  display: flex;
  justify-content: center;
  align-items: center;
	/*ここまでテキスト中央寄せの指定*/
}

.flipZ1 a:hover span.cap {/*hoverした時の変化*/
  transform: rotate3d(0, 0, 0, 0deg);/*奥行きをもたせて回転*/
  opacity: 1;
  transition-delay: 0.15s;/*移り変わる速さを変更したい場合はこの数値を変更*/
}