cssで反応しない3D画像ギャラリー

Question

私のサイトkaloraat.comに3D回転イメージギャラリーがあります。それは素晴らしいですが、モバイルデバイスには十分に反応しません。サイズは縮小せず、ユーザーがタッチスクリーンデバイスを使用して右にスライドすると、本体から外れます。

私はcodepenからコードを取得しました。ちょうどGoogleの3D画像ギャラリーcodepenですが、リンクを貼り付けようとしましたが、ここではエラーが発生しました。

レスポンシブにするためのアイデアはありますか？私はそれをブートストラップ容器の液体、ジャンボトロンなどで包んだが成功しなかった。

HTML

<h1>3d images gallery</h1> 
    <div class="container"> 
     <div id="carousel"> 
      <figure><img src="http://lorempixel.com/186/116/nature/1" alt=""></figure> 
      <figure><img src="http://lorempixel.com/186/116/nature/2" alt=""></figure> 
      <figure><img src="http://lorempixel.com/186/116/nature/3" alt=""></figure> 
      <figure><img src="http://lorempixel.com/186/116/nature/4" alt=""></figure> 
      <figure><img src="http://lorempixel.com/186/116/nature/5" alt=""></figure> 
      <figure><img src="http://lorempixel.com/186/116/nature/6" alt=""></figure> 
      <figure><img src="http://lorempixel.com/186/116/nature/7" alt=""></figure> 
      <figure><img src="http://lorempixel.com/186/116/nature/8" alt=""></figure> 
      <figure><img src="http://lorempixel.com/186/116/people/9" alt=""></figure> 
     </div> 
    </div> 

CSS

@import url(http://fonts.googleapis.com/css?family=Anaheim); 

*{ 
    margin: 0; 
    padding: 0; 
    outline: none; 
    border: none; 
    box-sizing: border-box; 
} 
*:before, 
*:after{ 
    box-sizing: border-box; 
} 
html, 
body{ 
    min-height: 100%; 
} 
body{ 
    background-image: radial-gradient(mintcream 0%, lightgray 100%); 
} 
h1{ 
    display: table; 
    margin: 5% auto 0; 
    text-transform: uppercase; 
    font-family: 'Anaheim', sans-serif; 
    font-size: 4em; 
    font-weight: 400; 
    text-shadow: 0 1px white, 0 2px black; 
} 
.container{ 
    margin: 4% auto; 
    width: 210px; 
    height: 140px; 
    position: relative; 
    perspective: 1000px; 
} 
#carousel{ 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    transform-style: preserve-3d; 
    animation: rotation 20s infinite linear; 
} 
#carousel:hover{ 
    animation-play-state: paused; 
} 
#carousel figure{ 
    display: block; 
    position: absolute; 
    width: 186px; 
    height: 116px; 
    left: 10px; 
    top: 10px; 
    background: black; 
    overflow: hidden; 
    border: solid 5px black; 
} 
#carousel figure:nth-child(1){transform: rotateY(0deg) translateZ(288px);} 
#carousel figure:nth-child(2) { transform: rotateY(40deg) translateZ(288px);} 
#carousel figure:nth-child(3) { transform: rotateY(80deg) translateZ(288px);} 
#carousel figure:nth-child(4) { transform: rotateY(120deg) translateZ(288px);} 
#carousel figure:nth-child(5) { transform: rotateY(160deg) translateZ(288px);} 
#carousel figure:nth-child(6) { transform: rotateY(200deg) translateZ(288px);} 
#carousel figure:nth-child(7) { transform: rotateY(240deg) translateZ(288px);} 
#carousel figure:nth-child(8) { transform: rotateY(280deg) translateZ(288px);} 
#carousel figure:nth-child(9) { transform: rotateY(320deg) translateZ(288px);} 

img{ 
    -webkit-filter: grayscale(1); 
    cursor: pointer; 
    transition: all .5s ease; 
} 
img:hover{ 
    -webkit-filter: grayscale(0); 
    transform: scale(1.2,1.2); 
} 

@keyframes rotation{ 
    from{ 
     transform: rotateY(0deg); 
    } 
    to{ 
     transform: rotateY(360deg); 
    } 
} 

すべてのヘルプは高く評価されるだろう。

Answer 1

小さな画面の場合は、transform：scale（）を使用してみてください。

@media (max-width: 600px) { 
    .project-magic { 
    transform: scale(0.6); 
    } 
}