css가 응답하지 않는 3D 이미지 갤러리

Question

내 사이트 kaloraat.com에 3D 이미지 갤러리가 있습니다. 그것은 좋지만 모바일 장치에 대해서는 충분히 반응하지 않습니다. 크기가 줄어들지 않으며 사용자가 터치 스크린 장치를 사용하여 오른쪽으로 밀면 신체 영역 밖으로 나옵니다.

나는 codepen에서 코드를 가져 왔고, Google 3D 이미지 갤러리 codepen 뿐이므로 링크를 붙여 넣으려고했는데 여기에 오류가 발생하여 Stack Overflow가 새로 생겼다.

응답 성을 높이기위한 아이디어가 있습니까? 나는 bootstrap 컨테이너 액, jumbotron 등으로 포장했지만 성공하지는 못했다.

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); 
    } 
}