info

多分フロントエンドエンジニア寄りのフリーランスWeb制作者のサイトです。

他バンドでギター弾いたり、max/msp触ったり等もしております。
最近はチャリ買ってはしゃいでます。
あと犬が飼いたい。

どうぞお気軽にご連絡いただけまししたら幸いです。

works

  • > toyota
  • > glico
  • > bandainamco
  • > shiseido
  • > pioner
  • > mitsui
  • > yodobashi
  • > panasonic
  • > square enix
  • etc..

※詳細をご希望の方はお手数ですが

contactよりご連絡お願いします。

links

リンクです。増えるといいな

contact

ご依頼/ご相談は下記よりお問い合わせください。
その他ご質問等ありましたらお気軽にご連絡ください。

translate3dで3dcarouselっぽいもの firefoxでおかしい時

css3のtanslare3dとjsで組み合わると3Dカルーセルみたいのできます。

プラグインもあるけどスワイプとかマウスホイールも対応でとのリクエストがきたので既存プラグインの中身拝借しつつ自作しました。

で、css3のtanslare3dで3D表現する際translateZとfirefoxでちょっと詰まったのでメモ。

js適用してないので動きませんが、こんなの

<nav class="carousel">
    <ul class='clf'>
        <li class="carousel__elm--01"><a href=""><span>1</span></a></li>
        <li class="carousel__elm--02"><a href=""><span>2</span></a></li>
        <li class="carousel__elm--03"><a href=""><span>3</span></a></li>
        <li class="carousel__elm--04"><a href=""><span>4</span></a></li>
        <li class="carousel__elm--05"><a href=""><span>5</span></a></li>
    </ul>
</nav>
.firefox .carousel ul{
    -webkit-transform-style: preserve-3d!important;
    transform-style: flat!important;
}
.carousel{
margin-top: 50px;
height:150px;
margin-bottom: 50px;
}
.carousel ul{
position: relative;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 900px;
perspective: 900px;
height: 150px;
}
.carousel ul li{
display: block;
float: left;
width: 20%;
height:150px;
box-sizing: border-box;
padding: 10px;
position: absolute;
left: 0;
top: 0;
}
.carousel ul li a{
display: block;
width: 100%;
height: 100px;
background-color: #000;
color: #ccc;
font-weight: bold;
font-size: 30px;
position: relative;
}
.carousel ul li span{
position: absolute;
display: block;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
}
.carousel__elm--01{
transform: translateX(0%) translateZ(-300px) rotateY(45deg);
}
.carousel__elm--02{
transform: translateX(100%) translateZ(-200px) rotateY(45deg);
}
.carousel__elm--03{
transform: translateX(200%) translateZ(0px) rotateY(0deg);
}
.carousel__elm--04{
transform: translateX(300%) translateZ(-200px) rotateY(-45deg);
}
.carousel__elm--05{
transform: translateX(400%) translateZ(-300px) rotateY(-45deg)
}

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

あともう一個各要素にリンク設置してるのですがfirefoxだとtranslateZ設定すると反応するエリア?がなんか様子おかしげ。
どうしたものかと思って色々試したら-webkit-transform-style: preserve-3d;を優先すれば一応期待した動きになりました。
autoprefixerとかでベンダープレフィックスつけてるとtransform-style優先してしまうのでfirefoxは別途で調整必要かもです。(2016-09時点)

広告なのよー