Acabo de previsualizar mi espacio de trabajo y vi que las imágenes están fuera del cubo y muy grandes. ¿Se supone que debe ser así?

http://imgur.com/dKiqPpn

http://imgur.com/a/cp228

<!DOCTYPE html>
<html>
<head>
    <title>Galería de Transformación 3D</title>
    <meta name=viewport contenido=width=device-width, initial-scale=1.0>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='hoja de estilos' type='texto/css'>
    <link rel=stylesheet href=css/main.css>
    <link rel=stylesheet href=css/interactions.css>
</head>
<body>
    <div class=container>
        <header class=main-header clearfix>
            <img class=logo src=img/camera.svg>
            <h1 class=nombre>3DTransform <span>Galería</span></h1>
        </header>

        <div class=content clearfix>

            <div class=contenedor-cubo>
                <div class=cubo-foto>

                    <img class=frontsrc=img/photos/1.jpg alt=Espero que esto le ahorre mucho tiempo a algunas personas si se quedan atrapadas...>
                    <div class=atrás descripción-foto>
                      <h3>Earth from Space</h3>
                      <p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
                        <a href=# class=button>descargar</a>
                    </div>
                    <img class=izquierda src=img/photos/2.jpg alt=Espero que esto le ahorre mucho tiempo a algunas personas si se quedan atrapadas...>
                    <img class=right src=img/photos/3.jpg alt=Espero que esto le ahorre mucho tiempo a algunas personas si se quedan atrapadas...>

                </div>
            </div>  

            <div class=contenedor-cubo>
                <div class=cubo-foto>

                    <img class=frontsrc=img/fotos/4.jpg alt=Espero que esto le ahorre mucho tiempo a algunas personas si se quedan atrapadas...>
                    <div class=atrás descripción-foto>
                      <h3>Imágenes del Espacio</h3>
                      <p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
                        <a href=# class=button>descargar</a>
                    </div>
                    <img class=izquierda src=img/fotos/5.jpg alt=Espero que esto le ahorre mucho tiempo a algunas personas si se quedan atrapadas...>
                    <img class=right src=img/fotos/6.jpg alt=Espero que esto le ahorre mucho tiempo a algunas personas si se quedan atrapadas...>

                </div>
            </div>  

            <div class=contenedor-cubo>
                <div class=cubo-foto>

                    <img class=frontsrc=img/fotos/7.jpg alt=Espero que esto le ahorre mucho tiempo a algunas personas si se quedan atrapadas...>
                    <div class=atrás descripción-foto>
                      <h3>La Vía Láctea</h3>
                      <p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
                        <a href=# class=button>descargar</a>
                    </div>
                    <img class=izquierda src=img/fotos/8.jpg alt=Espero que esto le ahorre mucho tiempo a algunas personas si se quedan atrapadas...>
                    <img class=right src=img/fotos/9.jpg alt=Espero que esto le ahorre mucho tiempo a algunas personas si se quedan atrapadas...>

                </div>
            </div>  

        </div>
    </div>
</body>
</html>

/* ================================= 
  Estilos de Elemento Base
==================================== */

* {
    box-sizing: border-box;
}
body {
    font: 1em/1.5 'Open Sans', sans-serif;
    color: #373737;
    background: #eaeaea;
    margin: 0;
}
a {
    text-decoration: none;
}
h1,
h2,
h3 {
    text-transform: uppercase;
}
h2 {
    font-size: 1.125em;
    color: #4a89ca;
    font-weight: 600;
    margin: 0;
}
h3 {
    font-size: 1.3em;
    line-height: 1.25em;
    margin-top: .85em;
    margin-bottom: .5em;
}
p {
    font-size: .875em;
    line-height: 1.4;
    margin: 0 0 1.5em;
}

/* ================================= 
  Estilos de Diseño Base
==================================== */

/* ---- Contenedores de diseño ---- */

.container,
.content {
    margin: auto;
}
.container {
    width: 94.02985075%;
    max-width: 1260px;
    padding: 0 2.25em 4em;
    background: #fff;
}
.main-header {
    text-align: center;
    padding: 2.8em 0 3.8em;
}
.cube-container {
    max-width: 200px;
    text-align: center;
    margin: 0 auto 4.5em;
}
/* ---- Elementos de página ---- */

.name {
    font-size: 1.65em;
    font-weight: 800;
    margin: 0 0 1.5em;
    line-height: 1;
}
.name span {
    font-weight: 300;
    margin-left: -7px;
}
.logo {
    width: 45px;
    margin-bottom: .4em;
    cursor: pointer;
}
.button {
    font-size: .8em;
    color: #fff;
    width: 90%;
    line-height: 1.15;
    font-weight: 700;
    display: block;
    text-decoration: none;
    text-transform: uppercase;
    padding: .95em 0;
    border-radius: .5em;
    background: rgba(74,137,202, .8);
    margin: auto;
}
/* ---- Superposición de foto ---- */

.photo-desc {
    font-size: .85em;
    color: #fff;
    padding: 1.1em 1em 0;
    background: #345d88;
}
/* ---- Corrección de flotación ---- */

.clearfix::after {
    content: " ";
    display: table;
    clear: both;
}

/* ================================= 
  Consultas de Medios
==================================== */

@media (min-width: 769px) {
    .cube-container {
        float: left;
        margin-left: 16.6%;
    }
}
@media (min-width: 1025px) {
    .cube-container:first-child {
        margin-left: 0;
    }
    .cube-container:last-child{
        float: right;
    }
    .content {
        max-width: 900px;
        margin: auto;
    }
}

/* =================================
  Transiciones de Botones
==================================== */

.button {
    transition: background .3s;
}
.button:hover {
    background: rgba(74,137,202, 1);
}

/* =================================
  Transformaciones 3D de foto & Transiciones
==================================== */

.cube-container {
    box-shadow: 0 18px 40px 5px rgba(0,0,0,.4);
    perspective: 800px;
}

.photo-cube {
    transition: transform 2s ease-in-out;
    width: 220px;
    height: 200px;
    transform-style: preserve-3d;
}

.photo-cube:hover {
    transform: rotateY(-270deg);
}