3D-галерея изображений сделана с css не реагирует

Question

У меня есть картинка с поворотом 3D на моем сайте kaloraat.com. Он выглядит великолепно, но не достаточно отзывчив для мобильных устройств. Размер не уменьшается, и если пользователь скользит вправо с помощью сенсорного устройства, он выходит из области тела.

Я взял код из codepen, просто Google 3d-галерея изображений codepen, я попытался вставить ссылку, но я получаю здесь ошибку, новый для переполнения стека.

Любые идеи, чтобы сделать его отзывчивым? Я завернул его в жидкость для бутстрапа, 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); 
    } 
}