How to create 3D carousel only with HTML5 - CSS3 (Very easy - well explained)
Вставка
- Опубліковано 12 лис 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.
Ya hice el carrusel 3d esta muy bonito atractivo visual. Gracias magnus Dios te bendiga.
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
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 :)
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!!!
¡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, le deseo muchas bendiciones
maestro me has sacado de un apuro, tienes un gran futuro sigue asi.
Muchas gracias amigo por dejarme tan motivador comentario... 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
gracias amigo.. era justo lo que andaba buscando... me fue de mucha ayuda.. asi ya podre terminar mi pagina gracias...!!
Excelente video ... Muy bien explicado me ayudo mucho para un proyecto
La verdad lo explicaste muy bien y quedo estupendo, muchas gracias!
Genial, eres un excelente instructor, facilitas el aprendizaje del código de una forma profesional.
Gracias
Luis desde Venezuela, hermano lo felicito, excelente información, gracias
Gracias!!! me ayudas mucho en la tarea!
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 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. ;-)
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 material y gracias por compartir el código ....
Muy cierto!!...Bien explicado. Excelente vídeo me gusta como corrige errores, así también se aprende
Magtimus, eres un moustro, te admiro, mucha suerte y bendiciones.
Gracias! amigo te felicito..y Muchas gracias por los conocimientos compartidos ...
amigo gracias esto te quedo muy bien gracias me salio al pelo
se ve bien gracias por explicar espero hacerlo no se nada de ccs pero espero lograrlo
eres un crack me sirvio demasiado cuenta con un seguidor mas....
Gracias me sirvió muchísimo!
gracias capo muy buena la explicacion
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 !
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
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.
Very helpfull video.........thanks for your innovation.....
¡Genial! Me ayudo mucho, gracias.
Suscrito, muy entendible tus archivos están ordenados; lo máximo. ME SUSCRIBO Y LIKE.
Me gustaría saber como hacerlo responsive, muy buen vidio, seguís a si, #Like #Smile 🤙😎
Gracias MagtimusPro, saludos desde Perú
muy bueno se ve muy bonito el carrusel
Genial...mañana lo hago...trate de hacer lo mismo con materialize y no me salió....así que ganaste un seguidor
Muy bueno gracias
Hola excelente amigo mis felicitaciones
muy buen video me ayudo bastante ,
quedó super guay, muchas gracias magtimus!! sigue así, eres un crak!! saludoss!!
Muito bonito esse carrossel!!! Parabéns!!!
Gostei muito da forma que explicas.
Meu muito obrigado a você.
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.....
Funciona muy bien, eternamente agradecido
Hola quisiera saber si el carrousel se adapta a celulares osea es responsive
saludo como agrego un contenido a cada imagen al detener.. el contenido varia semanal de manera que pueda cambiarlo de forma facil
Un crack 😍😍 gracias por tu ayuda
Hola, encantada de tu trabajo, me gustaria saber como cambio para que el carrusel sea un poco mas lento? perdon soy nueva en esto.
EXCELECTE AMIGO MIL Y MIL GRACIAS POR TU APORTE ME SIRVIO MUCHO GRACIAS
Exelente !! Suscripción !!!
una pregunta qué dimensión de imagen es necesaria para hacer un carrusel y un slider.
Muy bueno, mano!
más un inscrito en el canal!
Saludos de Brasil.
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
Es demasido complicado, ya que utilizo el sublime text, pero excelente video Gracias por tu aporte
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
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.
PERFECT 👏👏👏👏
buen video amigo .saludos desde peru
ty estuvo genial
Excelente video. Me gustó mucho sigue así.saludos
Gracias amigo, seguiré así y mejor aun.
Saludos desde República Dominicana.
Genio!! muy buenos videos, estoy aprendiendo cosas nuevas con css, porque aun no domino js ni bootstrap :c
Excelente video, gracias.
Cesar Baquero Gracias amigo.
Saludos desde República Dominicana
amigo como incrusto la codificación realizada en el archivo index.html a mi pagina web
Amigo excelente video
Hola qué tal, se puede controlar la velocidad del carrusel?
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
Hola bro sirve para hacer un simulador de pisos de ceramica?
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
Me gusto mucho, no pude cuadrar los tamaños de las imagenes, por mas que intente. si le deba overflow hidden se me desaparecian
excelente vídeo
Muy bueno el vídeo. Felicitaciones!
muchísimas gracias, saludos!
me encanto solo que como podria hacerle para que este mas pequeño
Puedo hacerlo en sublime text verdad
gracias y no te preocupes todos nos confundimos.
Buenas noches, tengo problema con position:absolute, no me funciona
genial:) gracias!
bueno ahora intento poner texto debajo del carrousel pero no me deja aparece detras del carrousel
que podria hacer?
Se puede usar estos códigos en Dreamweaver?
elegante!
en que parte del codigo de css se puede poner el reflejo
Hola! Podrías decirme como hacerlo responsive? gracias!!
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
Muy bueno, y sera que tengas el css para hacer este apartado responsive?, saludos
Buen video, loco. Nuevo suscriptor y liked.
Cuando pongo figure*7>img y apreto tap no pasa nada
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, 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
Excelente
!
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?
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
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
AMIGO MUY BIEN EL VÍDEO QUISIERA SABER SI VENDES LA APLICACIÓN CARROUSEL .
un crack de la vida amigo ;)
Q editor utilizas? Te agradeceria mucho.
no pude lograr poner las imagenes en forma 3d osea que se separen. me giran todos juntas. no logre encontrar e error
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 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
como hago para aumentar el tamaño de las imagenes?? muchas gracias