How to create 3D carousel only with HTML5 - CSS3 (Very easy - well explained) 

Eres un fenómeno. La perfección se alcanza con los años y tú lo alcanzarás muy pronto. Muchas gracias por todo lo que nos enseñas.

gracias amigo nuevamente, me gusta el estilo que usas para enseñar, no importa que cometas errores no los edites, porque asi tambien podemos entender como solucionarlo si nosotros llegamos a equivocarnos en algun momento - Saludos desde Ecuador.

You are amazing!! I love those videos and even though You explain stuff in Spanish (and I understand Spanish just a bit) I understand you without any problem! Best videos ever!! Thank YOu veeeeeeeeeeeery much

Muy cierto!!...Bien explicado. Excelente vídeo me gusta como corrige errores, así también se aprende

magnifico vídeo, yo estaba buscando uno con js porque creí que era más sencillo y me acabas de demostrar que no es la herramienta sino quien la trabaja, maravilloso vídeo, que genial que dejaste el error porque es algo común y que cualquiera puede cometer e igualmente aprender del mismo, sigue así tienes mi like y mi suscripción, sigue adelante crack

una sola palabra para describirte: ¡CRACK! muchísimas gracias por tan buen tuto :)

Genial, eres un excelente instructor, facilitas el aprendizaje del código de una forma profesional. Gracias

¡Muy buenas Magtimus! La verdad es que estoy empezando a programar y a crear mi primera página web con puro código. Buscaba hacer una galería poco convencional, y que llamase la atención del visitante. Por casualidad, me «tropecé» con tu vídeo, y me dije: «¡Voy a intentar hacerlo, a ver qué tal me sale!». Seguí los pasos del vídeo, ¡Y ME SALIÓ PERFECTO!, salvo por 2 diferencias: 1ª) tu galería gira de derecha a izquierda, y yo la puse de izquierda a derecha. Es decir, intercambié los valores de los «@keyframes», y 2ª) que pusiste 10 imágenes, y yo sólo puse 6, pero lo compensé haciendo los cálculos con la calculadora. (Por cierto, la imagen que le corresponde los «360deg», no se los puse, porque, si se los pongo, una imagen se superpone a la otra [una de frente, y a otra, de espaldas, pegada a la primera, y no podía ser]. Así que, a la última, le puse sólo «300deg»). En suma: en el CSS, a la última imagen, se lo puse así: «.content-carousel figure:nth-child(6){transform: rotateY(300deg) translateZ(300px);}» A propósito, hay gente que pregunta cómo se podría hacer esta galería «responsive» (adaptable a diferentes dispositivos). Por ello, me sumo a su petición y, por favor, cuando tengas algún «truquillo» para ello, ¿me lo podrías comunicar, si eres tan amable? Esperando tu respuesta, recibe un cordial saludo desde España. ;-) N.B.: ¡Ah, casi se me olvida! Por tu trabajo super bien explicado, te has ganado un «Me gusta» y un suscriptor más. ¡Felicidades! ¡Sigue así! ;-)

Ya hice el carrusel 3d esta muy bonito atractivo visual. Gracias magnus Dios te bendiga.

Muito bonito esse carrossel!!! Parabéns!!! Gostei muito da forma que explicas. Meu muito obrigado a você.

gracias amigo.. era justo lo que andaba buscando... me fue de mucha ayuda.. asi ya podre terminar mi pagina gracias...!!

La verdad lo explicaste muy bien y quedo estupendo, muchas gracias!

Gracias! amigo te felicito..y Muchas gracias por los conocimientos compartidos ...

Hola Magtimus, sin duda, eres un niño-genio (naces ya en esta Nueva Era de Acuarius), pero a diferencia de otros nacimientos, tus antecedentes remotos te hacen tener una gran facilidad para: interpretar, utilizar y enseñar, todo acerca de manejo de código, por lo cual personalmente te expreso mi admiración y al mismo tiempo mi deseo para que continúes en este maravilloso camino (por supuesto también me suscribo para estar al pendiente de los tutoriales que compartes). Una observación que posiblemente sea de utilidad respecto al tutorial del carrusel en 3D es que: animation: rotar 10s infinite linear; , la pueden modificar hasta 60s y de esta manera apreciar mejor las imágenes que se están rotando. ☑

Excelente video ... Muy bien explicado me ayudo mucho para un proyecto

Luis desde Venezuela, hermano lo felicito, excelente información, gracias

Very helpfull video.........thanks for your innovation.....

quedó super guay, muchas gracias magtimus!! sigue así, eres un crak!! saludoss!!

Magtimus, eres un moustro, te admiro, mucha suerte y bendiciones.

excelente canal y excelente trabajo me encanta suscrita desde hace ya algun tiempo.

EXCELECTE AMIGO MIL Y MIL GRACIAS POR TU APORTE ME SIRVIO MUCHO GRACIAS

muy bueno se ve muy bonito el carrusel

Suscrito, muy entendible tus archivos están ordenados; lo máximo. ME SUSCRIBO Y LIKE.

¡Genial! Me ayudo mucho, gracias.

Hola. Me gusto mucho el carrusel y lo probe. Quedo buenisimo. Eso si al hacerlo con menos imagenes, me di cuenta que en el primer rotateY hay que darle un valor diferente a 0 al nth-child(1), si no queda cubierto por el ultimo (360 grados es lo mismo que 0 grados). En otras palabras hay que considerar la totalidad al dividir los 360 grados y comenzar sumando en el primero. Saludos!!!

Funciona muy bien, eternamente agradecido

Perfecta explicación y muy bueno que tambien muestres el arreglo de errores que muchos tienen y les sirve observar como lo solucionas. Saludos

Excelente material y gracias por compartir el código ....

Lo hice y me encantó!!! Si me sirvió tu vídeo:3 Ahora soy suscriptora:3 Y me encantó tu risita JAJAJA la ameeeee!! Eres genial:3

Gracias, le deseo muchas bendiciones

Demasiado lindo muchas gracias !

se ve bien gracias por explicar espero hacerlo no se nada de ccs pero espero lograrlo

Excelente explicação, bem didático obrigado. +1 inscrito Saudações BR

eres un crack me sirvio demasiado cuenta con un seguidor mas....

Gracias!!! me ayudas mucho en la tarea!

Eu adoro quando os erros acontecem...assim aprendemos juntos a corrigir os erros que sempre ira acontecer quando estamos criando alguns projetos....Valeu

muy buena explicación me sirvió y se ve muy bocana esa galería, recomendación para el tamaño de las imágenes es mejor en ".content-carrousel img " pero de resto muy bn

Excelente vídeo. uno de los detalles que más aprecio es que no edites el vídeo cuando cometes un error. Pero no todo el mundo aprecia esto, lo que además podrías hacer (aparte de avisar) es colocar un link en el vídeo por medio de un comentario en pantalla que lleve a los visitantes al punto donde ya lo arreglaste o simplemente pones en el comentario el tiempo del video donde lo arreglaste. Excelente Vídeo!! Saludos.

Hola, me gustó mucho la manera de explicar, estoy empezando con la programación y quisiera que me ayudaras con algunas dudas para personalizar mi carrusel. Gracias

gracias por ser el crack que encontre en la cuarentena :v hace rato buscaba quien me explique con etiquetas html,css y no usara el script

genial:) gracias!

amigo gracias esto te quedo muy bien gracias me salio al pelo

Gracias me sirvió muchísimo!

Muy bueno, mano! más un inscrito en el canal! Saludos de Brasil.

Genio!! muy buenos videos, estoy aprendiendo cosas nuevas con css, porque aun no domino js ni bootstrap :c

Excelente video. Me gustó mucho sigue así.saludos

Gracias MagtimusPro, saludos desde Perú

maestro me has sacado de un apuro, tienes un gran futuro sigue asi.

exelente video amigo sigue adelante con estos tutoriales fabulosos mi sirvio de mucho tengo una duda al momento que se detiene la imagen o posicionar el mouse la resolución de la imagen empeora a que se debera eso amigo saludos desde Ecuador

Hola, encantada de tu trabajo, me gustaria saber como cambio para que el carrusel sea un poco mas lento? perdon soy nueva en esto.

Me gustaría saber como hacerlo responsive, muy buen vidio, seguís a si, #Like #Smile 🤙😎

Hola excelente amigo mis felicitaciones

gracias capo muy buena la explicacion

Buen video, loco. Nuevo suscriptor y liked.

Es demasido complicado, ya que utilizo el sublime text, pero excelente video Gracias por tu aporte

Ay no, soy tu fan! Me ayudaste muchísimo con este video!! Te acabas de ganar una suscriptora mas:D

Un crack 😍😍 gracias por tu ayuda

Muy bueno gracias

Gracias, excelentemente explicado, mil bendiciones.. una pregunta: ¿como se hace para colocar el nombre de cada imagen al colocar el cursor sobre cada una?..por ejemplo, si la imagen es una playa--que al colocar el cursor y se detiene la imagen, salga la palabra "playa"..._Gracias!

Brilhante!

Gracias amigo, muy interesante y bien explicado, estoy empezando el aprendizaje de html, pregunto es posible insertar este carrusel en wordpress?

un crack de la vida amigo ;)

Excelente video, gracias.

buen video amigo .saludos desde peru

Muy buen vídeo y bien explicado. Te ganaste Nuevo Subscriptor. Muchas gracias por el aporte. también soy programador. Buen trabajo colega. Excelente. Saludos ♠

Excelente !

PERFECT 👏👏👏👏

muy buen video me ayudo bastante ,

Amigo muy buen vídeo, pero quiero hacerte una consulta, si quiero que cuando le de clic a una de la imágenes del carrusel esta haga zoom sobresaliendo del carrusel, como se haría eso? Ademas, es posible hacer el carrusel responsive?

Gracias mi hermano motivador tu carrusel, una consulta como haces para que en la web te salga las lineas azules que cuadras el tamaño de la imágenes !!!! Saludos de Peru

Excelente video, buena explicacion, pero si lo deseo colocar en mi blogger donde lo inserto? en el editor html o en un gadget? gracias bro

Exelente !! Suscripción !!!

Muy bueno, y sera que tengas el css para hacer este apartado responsive?, saludos

Amigo excelente video

elegante!

ty estuvo genial

Genial...mañana lo hago...trate de hacer lo mismo con materialize y no me salió....así que ganaste un seguidor

Puedes hacer un slider automatico con las cards hover automaticos y manuales estiloe carousel Y otro video con carousel con las cards hover por favor bro te admiro y esta fascinante tu trabajo y noto que lo que te comento no lo ha hecho nadie mas puedes ser el primero si te le mides

excelente vídeo

Thank you my friend.

¡GRACIAS!

que genial

pelfecto

amigo muy buen video, sabrás disculpar, como haría en el caso de que quiera que el carousel cambie de imagen con el mouse

nuevo suscriptor

Excelente video

buenas tardes, es muy interesante, pero quiero hacerle una consulta si podía hacerlo el mismo carrusel en forma de la rueda de la fortuna por favor.

Excelente video amigo !!!! Qual ide estas usando ?

Magnifico video, me gustó mucho, aunque encontré un error, tu carrusel no muestra 10 imágenes, solo muestra 9, es porque una imagen está sobrepuesta a otra, ya que los 0 grados coinciden con la posición de los 360

Hola , he realizado todo paso a paso como tu vídeo y no hay cambios en mis imágenes y tengo una pequeña duda , mis iconos de % , px , y ms se muestran de otro color al de los números , no se si esto afecte en algo :C gracias y buen video

buen video 👍

Hola quisiera saber si el carrousel se adapta a celulares osea es responsive

Que bueno . me gusto muchisimo el Carrusel de Fotos, ahora la pregunta es la siguiente: ¿Que posibilidad hay de mostrarlo en un blog.?... solo pego el codigo y ya

Muy bueno el vídeo. Felicitaciones!

Excelente amigo, una pregunta ¿como puedo hacer un slider con vídeos de youtube?

Q editor utilizas? Te agradeceria mucho.

Bro sabes si hay algun problema que tu uses brackets y yo sublime?

Seria Genial si al hacer click, sobresalga una imagen :D ,, Buen Proyecto bro felicidades..

excelente idea, crees que podría servir para hacer un modelo giratorio como en la paginas de autos que puedes girar el modelo del coche en 360º solo con html5 y css3?

Gran idea amigo, no soy muy ducho en esta área. pero como haría para colocar un ancla a cada imagen sin que pierda el estilo lo intente y me perdi el efecto