How to create 3D carousel only with HTML5 - CSS3 (Very easy - well explained)
ฝัง
- เผยแพร่เมื่อ 25 ส.ค. 2024
- Learn how to create a beautiful 3D carousel with html5 and css3, in a very easy and practical way. You will learn how to position objects with css3 and how to convert objects to 3D. You will also learn how to add an animation to your website. And all this only with html and css. I hope you like it!
This carousel is very interesting to introduce it to websites that have as a need to provide a set of images so that the user can see that it is a website, this caousel will also give your website a very nice and modern look. This is so that your web does not stay behind at design level and nice things.
Subscribe to my Channel ► goo.gl/Y5liMk
My Website ► magtimus.com
Download project here ► shink.in/PLV4R
___________________________
In this channel you will find a lot of content related to programming, graphic design, computer management among many other things.
___________________________
RECOMMENDED TUTORIALS, ANOTHER LANGUAGE !!!!!!!!!
How to create responsive menu with html5 - css3 ► shink.in/0m2XR
____________
HTML5 login form - CSS3 ► shink.in/lAxgS
____________
Contact form (Very easy) - HTML5 - CSS - PHP ► shink.in/GqDkB
____________
Comment box for your website ► shink.in/eZUcS
▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼
▼▼▼▼▼▼ ▼ ▼
Facebook ► / themagtimus
Instagram ► / magtimus
Twitter ► / magtimus
![[TH]FFWS SEA 2024 Fall - Knockout Stage Day 5](http://i.ytimg.com/vi/N2tl9xkQyyU/mqdefault.jpg)
![[TH] 2024 PMSL SEA W2D5 | Fall | พลาดวันนี้ จะต้องเสียใจ](http://i.ytimg.com/vi/A5-Cuo12p6A/mqdefault.jpg)
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.
una sola palabra para describirte: ¡CRACK!
muchísimas gracias por tan buen tuto :)
Ya hice el carrusel 3d esta muy bonito atractivo visual. Gracias magnus Dios te bendiga.
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
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.
Muchas gracias amigos, excelente comentario, tendré pendiente lo que he me has dicho.
excelente, me encanto su comentario.
Saludos desde República Dominicana
Yo también lo aprecio. Y como nadie es perfect@, tod@s, a veces, cometemos errores. Yo, como siempre, me he dicho: «con tanto código, tanta letra y tanta «puñeta», es muy fácil equivocarse.» Por cierto, me sumo a la sugerencia del punto del vídeo donde se corrigieron los errores. Saludos cordiales. ;-)
¡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í! ;-)
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
gracias amigo.. era justo lo que andaba buscando... me fue de mucha ayuda.. asi ya podre terminar mi pagina 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
Jajajaja, pues Bienvenido a MagtimusPro... tenemos muchos tutoriales interesantes! Saludos!
Excelente video ... Muy bien explicado me ayudo mucho para un proyecto
Gracias, le deseo muchas bendiciones
Muy cierto!!...Bien explicado. Excelente vídeo me gusta como corrige errores, así también se aprende
Perfecta explicación y muy bueno que tambien muestres el arreglo de errores que muchos tienen y les sirve observar como lo solucionas. Saludos
@xGhOsTeRx ejemplo en el minuto 04:00 corrigió el error de ruta del css lo cual es un error común, lo cual puede ser frustrante para los primerizos, mostrar como se realiza ese tipo de correcciones ayuda a los nuevos como yo
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. ☑
Genial, eres un excelente instructor, facilitas el aprendizaje del código de una forma profesional.
Gracias
Gracias! amigo te felicito..y Muchas gracias por los conocimientos compartidos ...
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
Excelente material y gracias por compartir el código ....
La verdad lo explicaste muy bien y quedo estupendo, muchas gracias!
maestro me has sacado de un apuro, tienes un gran futuro sigue asi.
Muchas gracias amigo por dejarme tan motivador comentario... Saludos.
Ay no, soy tu fan! Me ayudaste muchísimo con este video!! Te acabas de ganar una suscriptora mas:D
Aww! Muchas gracias a ti también por el apoyo, saludos.
Luis desde Venezuela, hermano lo felicito, excelente información, 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!!!
Me gustaría saber como hacerlo responsive, muy buen vidio, seguís a si, #Like #Smile 🤙😎
amigo gracias esto te quedo muy bien gracias me salio al pelo
excelente canal y excelente trabajo me encanta suscrita desde hace ya algun tiempo.
Gracias!!! me ayudas mucho en la tarea!
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.
eres un crack me sirvio demasiado cuenta con un seguidor mas....
gracias capo muy buena la explicacion
Muito bonito esse carrossel!!! Parabéns!!!
Gostei muito da forma que explicas.
Meu muito obrigado a você.
Genial...mañana lo hago...trate de hacer lo mismo con materialize y no me salió....así que ganaste un seguidor
EXCELECTE AMIGO MIL Y MIL GRACIAS POR TU APORTE ME SIRVIO MUCHO GRACIAS
Demasiado lindo muchas gracias !
Muy bueno gracias
muy bueno se ve muy bonito el carrusel
Gracias me sirvió muchísimo!
se ve bien gracias por explicar espero hacerlo no se nada de ccs pero espero lograrlo
Suscrito, muy entendible tus archivos están ordenados; lo máximo. ME SUSCRIBO Y LIKE.
Excelente video
Muchas gracias! Saludos
Gracias MagtimusPro, saludos desde Perú
¡Genial! Me ayudo mucho, gracias.
Funciona muy bien, eternamente agradecido
Muy bueno, mano!
más un inscrito en el canal!
Saludos de Brasil.
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
Hola excelente amigo mis felicitaciones
Hola, encantada de tu trabajo, me gustaria saber como cambio para que el carrusel sea un poco mas lento? perdon soy nueva en esto.
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 ♠
Amigo como agrego esto a mi pagina en wordpress
Eu adoro quando os erros acontecem...assim aprendemos juntos a corrigir os erros que sempre ira acontecer quando estamos criando alguns projetos....Valeu
PERFECT 👏👏👏👏
Exelente !! Suscripción !!!
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 quisiera saber si el carrousel se adapta a celulares osea es responsive
Genio!! muy buenos videos, estoy aprendiendo cosas nuevas con css, porque aun no domino js ni bootstrap :c
Es demasido complicado, ya que utilizo el sublime text, pero excelente video Gracias por tu aporte
buen video amigo .saludos desde peru
muy buen video me ayudo bastante ,
Excelente video. Me gustó mucho sigue así.saludos
Gracias amigo, seguiré así y mejor aun.
Saludos desde República Dominicana.
Buen video, loco. Nuevo suscriptor y liked.
elegante!
Dida el carrusel que elabore con la guia que proporcionaste. Las imagenes me siguen apareciendo juntas. Con la regla de overflow desaparecen por completo... Que puedo arreglar o que puedo cambiar.....
Excelente video, gracias.
Cesar Baquero Gracias amigo.
Saludos desde República Dominicana
genial:) gracias!
Excelente explicação, bem didático obrigado.
+1 inscrito
Saudações
BR
Un crack 😍😍 gracias por tu ayuda
una pregunta qué dimensión de imagen es necesaria para hacer un carrusel y un slider.
Cuando pongo figure*7>img y apreto tap no pasa nada
saludo como agrego un contenido a cada imagen al detener.. el contenido varia semanal de manera que pueda cambiarlo de forma facil
Brilhante!
Me gusto mucho, no pude cuadrar los tamaños de las imagenes, por mas que intente. si le deba overflow hidden se me desaparecian
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
Buenas, gracias por el tutorial, informarte de que tienes un error, si la imagen 10 termina en 360deg tapa a la imagen 1 que está en 0deg. Por lo tanto, no son de 40 en 40, era de 36 en 36, empiezas en 0 y terminas la 10 en 324deg. Un saludo y espero les sirva mi aporte.
estas ?
@@cristianarias9304 ?
nose si le ayudo a el, pero a mi si, muchisimas gracias por tu aporte
en que parte del codigo de css se puede poner el reflejo
hice todo al pie de la letra pero no consigo hacer las separaciones de cada ventana de las imagenes me quedan todas juntas aun
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
Excelente amigo, estaba buscando justo esto y lo encotre. Sin embargo tienes un "error", que incluso cuando descargue tu ejemplo aparecio, es muy poco visible pero existe. El error es sobre matematicas, al posesionar un elemento a 0 grados es igual que a 360 grados, ya que es el mismo punto del circulo, por lo tanto las imagenes 1 y 10 se superponen. La solucion es no empezar con la primera imagen en 0 grados si no en el resultado de la division de 360 entre el numero de elementos que quieras mostrar; para el caso de 10 imagenes debes dividir 360/10 y te dara 36, justo asi mismo lo dijiste en el video pero despues cambiaste a dividir entre 9 y colocaste en 0 grados la primera imagen, no se porque y se produjo el error impercentible (no tanto para los detallistas). Si utilizas 36 grados de diferencias entre cada elemento, situando al primer elemento en 36 grados, sumando al siguiente 36 grados, terminando con el ultimo a 360 grados, quedara perfecto. Ademas para los que quieran experimentar, yo coloque div despues de figure y dentro de ellos pude colocar imagen y texto (que era lo que queria) y funciono de maravilla. Saludos y muchas gracias. NOTA: Excelente que no edites de los errores aprende mas uno.
Gracias amigo por tu explicación. 👍
no pude lograr poner las imagenes en forma 3d osea que se separen. me giran todos juntas. no logre encontrar e error
un crack de la vida amigo ;)
gracias y no te preocupes todos nos confundimos.
Buenas noches, tengo problema con position:absolute, no me funciona
ty estuvo genial
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
Hola Magtimus.
No logro saber cómo meter el carrousell dentro de mi página ya armada.
Me podrías decir cómo hacerlo por favor ?
Gracias.
Me puedes escribir por nuestra pagina de facebook: "facebook.com/themagtimus
Saludos desde República Dominicana
Holii oye tengo un problema es que yo tengo un menu desplegable y pues al colocar esas imagenes en 3d al ir al menu los submenus salen por debajo de las imagenes 3d :/
Bro sabes si hay algun problema que tu uses brackets y yo sublime?
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
amigo como incrusto la codificación realizada en el archivo index.html a mi pagina web
una pregunta por q no gira el mio si hice todos los pasos al pie de la letra
Puedo hacerlo en sublime text verdad
Excelente
!
Queda muy bién, pero al ponerlo en blogger se superpone a otros gadgets, alguna solución?
excelente video pero me gustaría saber para seleccionar la imagen y que me mande a una ventana que debería colocó largo y crear un button en HTML en cada imagen
Amigo excelente video
aaaa no pude hacerlo, mis imagenes se superponen una a la otra que puedo hacer? ayuda
AMIGO MUY BIEN EL VÍDEO QUISIERA SABER SI VENDES LA APLICACIÓN CARROUSEL .
excelente vídeo
Amigo tengo un software de control de paquetería, cómo puedo integrar este software en mi blog de WordPress? El software lo tengo en copia de seguridad en mi PC