CSS/translate3dとjavascriptで作成した3Dカルーセルのサンプル

23/09/201611/03/2019

概要

css3のtanslare3dとjsの組み合わせで3Dカルーセルメニューのようなものです。
プラグインもあるけどスワイプとかマウスホイールも対応でとのリクエストがあったので自作した方が融通ききそうだなと作成しました。

追記

結構前(3年程前?)に書いた記事なのだけども
少しですがたまーにアクセス頂いたいるみたいなので、
内容の更新とcodepenで当時の成果物から抜粋でサンプル作成してみました。

とりあえずなPCでのマウスホイール動作だけで

スマホだったりmacの慣性スクロール等の細かい点は未対応です。

整理してvueとかで作ってみようかなとも思ったのですが、

最近はあまりこうゆうメニューあまり見かけなくなったような気もして、どうなんでしょう。

3Dカルーセルメニューのサンプル

See the Pen 3Dcarousel by admin@nocebo.jp (@nocebojp) on CodePen.

css/transformの調整

多分今回のでいうと一番のポイントが

.carousel__elm–**の各要素の

css/transform3dだと思います。

.carousel__elm--01 {
  -webkit-transform: translateX(-400px) translateZ(-250px) rotateY(20deg);
          transform: translateX(-400px) translateZ(-250px) rotateY(20deg);
  opacity: .1;
}
.carousel__elm--02 {
  -webkit-transform: translateX(-320px) translateZ(-200px) rotateY(20deg);
          transform: translateX(-320px) translateZ(-200px) rotateY(20deg);
}
.carousel__elm--03 {
  -webkit-transform: translateX(-160px) translateZ(-100px) rotateY(20deg);
          transform: translateX(-160px) translateZ(-100px) rotateY(20deg);
}
.carousel__elm--04 {
  -webkit-transform: translateX(0px) translateY(0px) translateZ(0px) rotateY(0deg);
          transform: translateX(0px) translateY(0px) translateZ(0px) rotateY(0deg);
}
.carousel__elm--05 {
  -webkit-transform: translateX(160px) translateZ(-100px) rotateY(-20deg);
          transform: translateX(160px) translateZ(-100px) rotateY(-20deg);
}
.carousel__elm--06 {
  -webkit-transform: translateX(320px) translateZ(-200px) rotateY(-20deg);
          transform: translateX(320px) translateZ(-200px) rotateY(-20deg);
}
.carousel__elm--07 {
  -webkit-transform: translateX(400px) translateZ(-250px) rotateY(-20deg);
          transform: translateX(400px) translateZ(-250px) rotateY(-20deg);
  opacity: .1;
}

js(babel)の調整

js側はざっくり言うとマウスホイールのイベントとったり、

要素に.carousel__elm–**のクラスadd/removeしているだけです。

詰まった点

transform-styleとperspectiveを設定する

なれていなかった点もあり、まず最初詰まったのがtranslateXとかいけるのにtranslateZいくら変えてもかわりません。
transform-styleがデフォルトがflatって値になってるの知らなくて少し時間かかりました。
preserve-3dとperspectiveで奥行き指定しないとtranslateZ動かないみたいです。あと各要素にheightもきちっと設定した方が良さげ

firefoxでのバグ？

あともう一個各要素にリンク設置してるのですがfirefoxだとtranslateZ設定すると反応するエリア？がなんか様子おかしげ。

.firefox .carousel ul{
    -webkit-transform-style: preserve-3d!important;
    transform-style: flat!important;
}

どうしたものかと思って色々試したら-webkit-transform-style: preserve-3d;を優先すれば一応期待した動きになりました。
autoprefixerとかでベンダープレフィックスつけてるとtransform-style優先してしまうのでfirefoxは別途で調整必要かもです。(2016-09時点)