How to create 3D carousel only with HTML5 - CSS3 (Very easy - well explained)
Вставка
- Опубліковано 14 гру 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
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.
Ya hice el carrusel 3d esta muy bonito atractivo visual. Gracias magnus Dios te bendiga.
una sola palabra para describirte: ¡CRACK!
muchísimas gracias por tan buen tuto :)
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
¡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í! ;-)
gracias amigo.. era justo lo que andaba buscando... me fue de mucha ayuda.. asi ya podre terminar mi pagina 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!!!
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. ;-)
maestro me has sacado de un apuro, tienes un gran futuro sigue asi.
Muchas gracias amigo por dejarme tan motivador comentario... Saludos.
Excelente video ... Muy bien explicado me ayudo mucho para un proyecto
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!
Muy cierto!!...Bien explicado. Excelente vídeo me gusta como corrige errores, así también se aprende
Luis desde Venezuela, hermano lo felicito, excelente información, gracias
Genial, eres un excelente instructor, facilitas el aprendizaje del código de una forma profesional.
Gracias
La verdad lo explicaste muy bien y quedo estupendo, muchas gracias!
Excelente material y gracias por compartir el código ....
Gracias! amigo te felicito..y Muchas gracias por los conocimientos compartidos ...
Me gustaría saber como hacerlo responsive, muy buen vidio, seguís a si, #Like #Smile 🤙😎
Magtimus, eres un moustro, te admiro, mucha suerte y bendiciones.
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. ☑
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.
Gracias!!! me ayudas mucho en la tarea!
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
quedó super guay, muchas gracias magtimus!! sigue así, eres un crak!! saludoss!!
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
eres un crack me sirvio demasiado cuenta con un seguidor mas....
amigo gracias esto te quedo muy bien gracias me salio al pelo
Very helpfull video.........thanks for your innovation.....
Suscrito, muy entendible tus archivos están ordenados; lo máximo. ME SUSCRIBO Y LIKE.
EXCELECTE AMIGO MIL Y MIL GRACIAS POR TU APORTE ME SIRVIO MUCHO GRACIAS
Hola, encantada de tu trabajo, me gustaria saber como cambio para que el carrusel sea un poco mas lento? perdon soy nueva en esto.
Gracias MagtimusPro, saludos desde Perú
gracias capo muy buena la explicacion
Genial...mañana lo hago...trate de hacer lo mismo con materialize y no me salió....así que ganaste un seguidor
Muito bonito esse carrossel!!! Parabéns!!!
Gostei muito da forma que explicas.
Meu muito obrigado a você.
¡Genial! Me ayudo mucho, gracias.
Eu adoro quando os erros acontecem...assim aprendemos juntos a corrigir os erros que sempre ira acontecer quando estamos criando alguns projetos....Valeu
Demasiado lindo muchas gracias !
se ve bien gracias por explicar espero hacerlo no se nada de ccs pero espero lograrlo
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.....
muy bueno se ve muy bonito el carrusel
Hola excelente amigo mis felicitaciones
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
Muy bueno, mano!
más un inscrito en el canal!
Saludos de Brasil.
Excelente video. Me gustó mucho sigue así.saludos
Gracias amigo, seguiré así y mejor aun.
Saludos desde República Dominicana.
Gracias me sirvió muchísimo!
Un crack 😍😍 gracias por tu ayuda
Funciona muy bien, eternamente agradecido
Es demasido complicado, ya que utilizo el sublime text, pero excelente video Gracias por tu aporte
Genio!! muy buenos videos, estoy aprendiendo cosas nuevas con css, porque aun no domino js ni bootstrap :c
buen video amigo .saludos desde peru
muy buen video me ayudo bastante ,
Hola quisiera saber si el carrousel se adapta a celulares osea es responsive
Buen video, loco. Nuevo suscriptor y liked.
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
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
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
Muy bueno gracias
saludo como agrego un contenido a cada imagen al detener.. el contenido varia semanal de manera que pueda cambiarlo de forma facil
Bro sabes si hay algun problema que tu uses brackets y yo sublime?
Exelente !! Suscripción !!!
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
AMIGO MUY BIEN EL VÍDEO QUISIERA SABER SI VENDES LA APLICACIÓN CARROUSEL .
Excelente explicação, bem didático obrigado.
+1 inscrito
Saudações
BR
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
una pregunta qué dimensión de imagen es necesaria para hacer un carrusel y un slider.
un crack de la vida amigo ;)
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
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, gracias.
Cesar Baquero Gracias amigo.
Saludos desde República Dominicana
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.
Muy bueno el vídeo. Felicitaciones!
muchísimas gracias, saludos!
Me gusto mucho, no pude cuadrar los tamaños de las imagenes, por mas que intente. si le deba overflow hidden se me desaparecian
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
Q editor utilizas? Te agradeceria mucho.
amigo como incrusto la codificación realizada en el archivo index.html a mi pagina web
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
Amigo excelente video
Muy bueno, y sera que tengas el css para hacer este apartado responsive?, saludos
PERFECT 👏👏👏👏
Tengo problemas , al momento de poner el "position: absolute; " las imagens no se ponen una detras de otras , no se si sea porque estan muy grandes , me podrian ayudar
hola estimado excelente videos y explicaciones,gracias.
La consulta es la siguiente, al hacer click sobre una imagen no se podra lograr que la imagen salga hacia adelante en un tamano mayor para que sea mas visible y al cerrarla vuelva hacia su origen y que continue el carrusel.
Gracias de antemano y disculpa la molestia, le he estado dando vueltas y no he podido lograr, toda ayuda sera bienvenida.
lo pudiste hacer al final?
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 :/
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
Hola bro sirve para hacer un simulador de pisos de ceramica?
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?
me sirvio perfectamente , pero no se como meter mas imagenes al carrusel , intento con nth-child(11) , ya que hay solo 10 imagenes y luego creo la con la imagen nueva , pero no me sale , sale atras de una de las imagenes , ayuda porfa , para mejorar eso
genial:) gracias!
Se puede usar estos códigos en Dreamweaver?
Gracias amigo, muy interesante y bien explicado, estoy empezando el aprendizaje de html, pregunto es posible insertar este carrusel en wordpress?
gracias y no te preocupes todos nos confundimos.
Hola qué tal, se puede controlar la velocidad del carrusel?
Hola Mag..!
MI carrousel gira ..pero las imagenes estan girando tambien en su eje Y..
que esta mal ?
Gracias por tus videos...!
hola tengo una duda y es ¿como le hago para que al momento de pasar el cursor a parte de detenerse me muestre un texto encima de la imagen?
Hola! Podrías decirme como hacerlo responsive? 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!
me encanto solo que como podria hacerle para que este mas pequeño