Cómo tener un mapa en perspectiva en mi sitio web

Ohhh … no necesitas que sea interactivo … lo entiendo ahora. Atornille el motor de juego. David Joyce está bastante en el blanco.

Primero, instale GIMP o Photoshop. GIMP es gratis. Aquí hay una gran versión para Mac OSX:

GIMP en OS X

Linux también es fácil de encontrar.

Así que usa lo que sea para obtener una captura de pantalla de tu mapa. Cárguelo en su software de edición de fotos. Estoy usando GIMP.

En las herramientas, hay una herramienta de “perspectiva” con forma trapezoidal. Elige eso.

Úselo para transformar su mapa así. Mira, acabo de arrastrar las esquinas superior izquierda y derecha hacia abajo, como si fuera la parte inferior de un cuadro lo que estás viendo.

Ahora, tendrás que aprender esta pequeña cosa llamada “capas”. Básicamente, la imagen funciona en diferentes imágenes que se superponen. Todos menos la capa de fondo / más inferior tendrán transparencia.

¿Ver? Agregué una capa negra debajo de la capa del mapa alterada en perspectiva. Eso permitirá que su mapa conduzca a la espeluznante oscuridad. Ahora necesitamos un auto. Acabo de tomar una captura de pantalla de algo de Internet con un fondo blanco. Pegué el auto como una nueva capa, en la parte superior, por lo que estaría en el mapa. El fondo es un color uniforme es importante, porque queremos que sea transparente usando esta herramienta “color a alfa”, también en GIMP. Alfa significa transparente, por lo que estás haciendo que un color represente lo que quieres ver a través de tu capa. De hecho, decidió que quería blanco por defecto, así que lo acepté.

Es cierto que las ventanas del automóvil se volvieron seudo-transparentes, pero puedes ver intuitivamente lo que está sucediendo, ¿verdad? Es coincidente por tono (proporción de rojo / verde / azul), y luego hace que solo el nivel de ese tono presente sea un nivel correspondiente de transparente.

Así que ahora tienes las tres capas como quieras, con el auto transparente en la parte superior:

Y aquí está la imagen resultante:

Puede aplanar la imagen y exportarla como JPEG o cualquier otro formato que desee. Si no te gusta el negro, siempre puedes recortarlo también.

Haga clic en este enlace: dabblet


 
Hello World! I am a div.
 
 
front
 
back
 
top
 
bottom
 
left
 
right

body { font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 100px; font-size: 13px; }

.mapa {
color blanco;
margen: 0 automático;
acolchado: 25px;
ancho: 500 px;
altura: 250 px;
transformar: rotar X (45 grados);
-webkit-box-shadow: rgba (0,0,0,0.5) 10px 20px 25px;
-moz-box-shadow: rgba (0,0,0,0.5) 10px 20px 25px;
box-shadow: rgba (0,0,0,0.5) 10px 20px 25px;
color de fondo: # 269;
imagen de fondo: gradiente lineal (blanco 1px, transparente 1px),
gradiente lineal (90deg, blanco 1px, transparente 1px),
gradiente lineal (rgba (255,255,255,0.3) 1px, transparente 1px),
gradiente lineal (90deg, rgba (255,255,255, .3) 1px, transparente 1px);
tamaño de fondo: 100 px 100 px, 100 px 100 px, 20 px 20 px, 20 px 20 px;
posición de fondo: -2px -1px, -2px -1px, -1px -1px, -1px -1px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
radio de borde: 50px;
}

.wrap {
perspectiva: 800 px;
perspectiva-origen: 50% 100px;
}

.cube {
posición: relativa;
ancho: 200 px;
transformar-estilo: preservar-3d;
transform: rotateX (-45deg) translateX (120px) translateZ (-1000px) translateY (1000px);
}

.cube div {
posición: absoluta;
ancho: 200 px;
altura: 200 px;
color de fondo: rgba (255, 255, 255, 0.3);
borde: 1px negro sólido;
}

.espalda {
transform: translateZ (-100px) rotateY (180deg);
}
.Derecha {
transform: rotateY (-270deg) translateX (100px);
origen de transformación: arriba a la derecha;
}
.izquierda {
transform: rotateY (270deg) translateX (-100px);
origen de transformación: centro izquierda;
}
.parte superior {
transform: rotateX (-90deg) translateY (-100px);
origen de transformación: centro superior;
}
.fondo {
transform: rotateX (90deg) translateY (100px);
origen de transformación: centro inferior;
}
.front {
transform: translateZ (100px);
}

@keyframes test {
0% {transform: rotateX (-45deg) translateX (120px) translateZ (-1000px) translateY (1000px); }
50% {transform: rotateX (-45deg) translateX (720px) translateZ (-1500px) translateY (1000px); }
75% {transform: rotateX (-45deg) translateX (720px) translateZ (-1000px) translateY (1000px); }
100% {transform: rotateX (-45deg) translateX (120px) translateZ (-1000px) translateY (1000px); }
}

.cube {
animación: prueba 5s infinita facilidad de entrada;
}

James Hollomon

Necesita una empresa de juegos (o un codificador de juegos) para diseñar e instalar esta operación en su sitio. Suena como un proyecto relativamente simple, por lo que debería ser económico a través de Hire Freelancers y Find Freelance Jobs Online. Escriba lo que necesita en un proyecto y envíelo allí; encontrará toda la ayuda que necesita rápidamente (como hoy) y podrá contratar al equipo o persona que necesita a un excelente precio. Debe hacerse en un instante.

La mejor de las suertes,

James Hollomon

A2a por el usuario de Quora

Me encantaría ver un enlace de lo que tienes ahora, Jesse. Pero sin mirarlo, estaría de acuerdo con la respuesta de David Joyce y la respuesta de Scott Danzig sobre cómo hacer que un mapa se vea bien. ¿Desea que el automóvil “sepa” dónde están las carreteras y solo pueda cruzarlas? ¿Qué es exactamente lo que quieres que suceda?

James Hollomon

Intenté algo así una vez. Usé Photoshop para hacer las transformaciones, pero probablemente hay otro software que puedes usar.

Comience con una imagen del mapa mirando hacia abajo. Use el software de imágenes para convertir ese mapa rectangular en un trapecio. Puede haber más de una forma de hacer esa conversión. Busque la transformación que hace perspectivas. Exprime el rectángulo de tal manera que las líneas diagonales permanecen diagonales. Observe cómo las líneas paralelas más alejadas en esta imagen están más juntas. Eso es lo que quieres.

Luego, agregue la imagen del automóvil superponiendo esa imagen de fondo.