CSSで回転する立体ボックスで画像をスライダー風一時停止も可

先日、回転するメニューを作成しました。

3D回転するユニークなヘッダー！かつ多階層メニュー　第2階層はスライドダウンで開閉、第3階層はアコーディオン開閉

メニューそれぞれを立体的な面（四角柱の一面）ととらえ、かつ四角柱をＹ軸を軸として回転させるアニメーションを作成しました（CSSで回転を実現しています）。第2階層をスライドダウン、第3階層をアコーディオン... 省スペースが可能です。

これを応用し、立体ボックスを構成する一面に画像を貼り付けて回転することにより、スライダー風に画像を切り替え表示できるのでは？と思い作成してみました。
用途としては、1つの商品の視点を変えた画像を4面に貼り付け、商品（立体ボックス）を複数並べるというのはいかがでしょうか。他にも用途はありそうですが、ご参考になれば幸いです。

contents

使用するファイル
実装
まとめ

使用するファイル

以下のみです。JSライブラリ等は使用しません。

HTMLファイル
CSSファイル

実装

CODEPENで実装と確認

「Run Pen」をクリックしてください。

See the Pen cube slider by blue moon (@blue-moon) on CodePen.

HTMLファイル

<body>
  <div class="container">
    <div class="title">
      <p>dog<span class="box"></span></p>
    </div>
    <ul class="cube">
      <li class="top">
      </li>  
      <li class="front">
        <div class="image-box">
          <img src="yourpath" alt="pug-1">
          <p class="name">Happiness is a warm puppy.</p>
        </div>
      </li>  
      <li class="right">
        <div class="image-box">
          <img src="yourpath" alt="pug-2">
          <p class="name">Dogs never bite me. Just humans.</p>
        </div>
      </li>  
      <li class="back">
        <div class="image-box">
          <img src="yourpath" alt="pug-3">
          <p class="phrase">The average dog is a nicer person than the average person.</p>
        </div>
      </li>
      <li class="left">
        <div class="image-box">
          <img src="yourpath" alt="pug-4">
          <p class="name">Dogs’ lives are too short. Their only fault, really.</p>
        </div>
      </li>  
    </ul>
  </div>
</body>

CSSファイル

/* reset&base */
body {
  font-size: 12px;
  color: #666;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  line-height: 1.8;
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  position: relative;
  margin: 70px auto;
  width:90%;
  perspective: 1000px;
}

.container .title {
  position: absolute;
  top: -3.5rem;
  width: 100%;
  z-index: 10;
  font-size: 2.5rem;
  text-align: center;
}

.container .title p {
  position: relative;
  display: inline-block;
  width: min-content;
  font-size: 2rem;
}

.box {
  position: absolute;
  top: 90%;
  left: 15%;
  display: inline-block;
  width: 70%;
  height: 3px;
  border-radius: 50%;
  background-color: #000;
  filter: blur(5px);
}

/* 立方体 */
.cube {
  position:relative;
  margin: 30px auto;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d; /* 子要素を3D空間 */
  animation: rotate 20s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotateX(-10deg) rotateY(20deg);
  }
  to {
    transform: rotateX(-10deg) rotateY(-340deg);
  }
}

.cube:hover{
  animation-play-state: paused; /* 回転一時停止 */
}

.cube li {
  position:absolute;
  left:0;
  right:0;
  width:100%;
  height:100%;  
}

.top {
  transform: translate3d(0, -100px, 0) rotateX(90deg);
  background-color: #fff;
  opacity: 0.7;
}

.front {
  transform: translate3d(0, 0, -100px);
}

.right {
  transform: translate3d(-100px, 0, 0) rotateY(90deg);
}

.back {
  transform: translate3d(0px, 0px, 100px) rotateY(180deg);
}

.left {
  transform:translate3d(100px, 0, 0) rotateY(-90deg);  
}

.image-box {
  position: relative;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

img {
  width: auto;
  height: 200px;
  transition: 1s ease-in-out;
}

.image-box p {
  display: none;
  position: absolute;
  bottom: 5%;
  margin: 0 auto;
  width: 85%;
  transform: rotateY(180deg);
  color: #333;
  text-shadow: 0.5px 1px 0.5px #fff;
}

.image-box:hover img {
  transform: scale(1.15)
}

.image-box:hover p {
  display: block;
}

補足説明

立体的に見せたい親要素に、perspectiveプロパティを設定しないと、立方体が歪な形になります。
この数値を色々変えると違う見え方になりますので、お試しください。
MDM カスケーディングスタイルシート： perspective

トップの面の色を白で少し透けさせることで、背面に画像があることをチラ見せしています。
トップの面の色を指定しないとそのまま背面の画像が見えます。お好みでよいかと思います。

タイトルは、立方体のトップの子要素もしくは兄弟要素にしそうになりますが、そうすると親要素の回転アニメーションを継承して回転してしまいます（ {position: fixed} でもダメ）。よって、立方体の外側に記述した方がよいようです。
折角なので、タイトルの文字も少し浮き上がったように見せるため、影を付けています。
filter: blur(●●px); によって、背景色の枠の境界をぼかしています。

まとめ

スライダーのライブラリーもたくさん種類があって、オプションもたくさんあり迷います。多数のサイトで定番となっているため差別化を図りたいところですが、オプションを使いこなすのも大変です。

3Dアニメーションは難しそうですが、CSSだけでも実装できるので重くはならないでしょうし、使いこなせるといろいろと応用できそうです。
この立体ボックス、マウスオーバーした時のアニメーションを少しアレンジしたもの（3つくらい）を~~近日中にアップする予定です。~~アップしました。