結果

See the Pen 【translate3d()アニメーション】JS無しでフリップカードを作る！ by BST株式会社 (@BST-web) on CodePen.

translate3d()とは？

translate3d() は CSS の関数で、要素を三次元空間内で再配置します。返値は データ型です。
この変換は三次元ベクトルであることが特徴です。座標は要素がそれぞれの方向にどれだけ移動するかを定義します。

構文：translate3d(tx, ty, tz)
translate3d() – CSS: カスケーディングスタイルシート | MDN

フリップの仕組み

基本の指定はCodePenをご覧ください。
ホバー時の角度・速度を調整されたい場合、 transform 指定により 回転軸（Y軸）、回転する角度（deg）量がコントロールされ、transition によって速度が指定されていますので、下記ソース部分にて調整してみてください。

.list-item:hover .item-inner,
.list-item:focus .item-inner {
  transform: rotateY(-180deg);
}
.item-inner {
  transform-style: preserve-3d;
  transition: transform 1s ease;
}
.item-back {
  transition: background-color 2s ease-out;
}

WEBサイト制作はBSTへ！

• BST株式会社コーポーレートサイト
• BST Youtubeチャンネル
• CodePen