【CSS】画面の中に埋め込みスライドショーを実装する

こんにちは。
前回、前々回とCSSのアニメーションやクリッピングについて記事を書いてみました。

今回はその両方を応用してPC画面に埋め込む形でスライドするTipsをこちらの記事（Perspective Mockup Slideshow | Codrops）からご紹介します。

3Dマッピングの技術

こちらデモを御覧ください。

画面上の奥行きなどに合わせてスライドする部分のフレームを変形させ、中の要素でスライドをさせます。

※必要に応じて-webkit-などの接頭辞をつけてください

.mobile {
     overflow: hidden;
     position: absolute;
     z-index: 100;
     background: #333;
     width: 320px;
     height: 480px;
     top: 200px;
     left: 500px;
     outline: 1px solid transparent; /* For Firefox (jagged edges bug) */
     transform-origin: 0 0 0;
     transform: matrix3d(0.846234173238242, 0.251585817964749, 0, 0.000085171934399447, -0.115203182108559, 0.800700357116676, 0, -0.000214263459947427, 0, 0, 1, 0, 23, 14, 0, 1);
}

スライドショー枠

.slideshow {
     padding: 0;
     margin: 0;
     width: 100%;
     height: 100%;
     list-style-type: none;
}

.slideshow__item {
     width: 100%;
     height: 100%;
     position: absolute;
     overflow: hidden;
     pointer-events: none;
     z-index: 1;
     transform: translate3d(-100%, 0, 0);
}

.slideshow__item.current{
     pointer-events: auto;
     z-index: 100;
     transform: translate3d(0, 0, 0);
}

.slideshow img {
     width: 100%;
}

アニメーション部分

.slideshow__item.in--next {
     animation: inNext 0.5s forwards;
}

.slideshow__item.out--next {
     animation: outNext 0.5s forwards;
}

.slideshow__item.in--prev {
     animation: inPrev 0.5s forwards;
}

.slideshow__item.out--prev {
     animation: outPrev 0.5s forwards;
}

@keyframes inPrev {
     0% {
          transform: translate3d(0, 100%, 0);
     }
     100% {
          transform: none;
     }
}

@keyframes inNext {
     0% {
          transform: scale3d(0.5, 0.5, 1);
     }
     100% {
          transform: none;
     }
}

@keyframes outPrev {
     100% {
          transform: scale3d(0.5, 0.5, 1);
     }
}

@keyframes outNext {
     100% {
          transform: translate3d(0, 100%, 0);
     }
}

transformと@keyframesを応用する

transformで見慣れないtranslate3dというのがありますね。
これは、

translate3d(X方向の距離, Y方向の距離, Z方向の距離)
translate3d()関数では、X方向とY方向とZ方向の距離で3D移動を指定します。 Y方向とZ方向の距離は省略することができますが、この場合のY方向とZ方向の距離は0となります。[tx,ty,tz]
引用：transform:translate()－CSS3リファレンス

また、

scale3dについては、