Skip to main content

Preguntas con la etiqueta [css-transform]

Las funciones de transformación de CSS permiten que el modelo visual de los elementos html sea transformado en un espacio de coordenadas bidimensional o tridimensional.

Filtrar por
Ordenado por
Etiquetadas con
0 votos
0 respuestas
122 vistas

invertir div como si fuera un espejo

Tengo esta figura div{ width:100px; height:100px; background:red; border-radius: 50px 50px 0 0; } <html> <body> <div> </div> </body> </html> ...
Avatar del usuario Juan Pablo Galvis Pérez
0 votos
0 respuestas
39 vistas

Invertir un div con css

Tengo esa flecha negra y la quiero trasladar y rotar al tiempo para que quede como la roja: Habia visto que se podia con una sola propiedad pero me toco mientras asi: transform-origin:bottom; ...
Avatar del usuario Juan Pablo Galvis Pérez
0 votos
0 respuestas
51 vistas

Problema en CSS con Position Absolute, el contenido se sobrepone con los demás contenidos

Quería utilizar un código que vi en Youtube "Como hacer un Menú de Navegación con Tabs" (https://www.youtube.com/watch?v=Xh94Osf1hvU&t=191s). Pero al momento de crear el menú utilizan ...
Avatar del usuario Luis JET
0 votos
1 respuesta
74 vistas

¿Cómo puedo aplicar una transición a dos elementos a la vez?

Quiero aplicar una transición a la imagen de fondo cuando el cursor pasa sobre el botón azul. Actualmente solo se aplica cuando pasa sobre la imagen misma. El botón tiene su propia transición que se ...
Avatar del usuario Aarón Hernández
0 votos
1 respuesta
121 vistas

Problema con un elemento con posicion Sticky y obtener el alto real con respecto a la pagina con JS

Tengo un problema y es que tengo un div que tiene posicionamiento sticky y al intentar obtener el element.getBoundingClientRect().top con el que puedo obtener la posición real con respecto al alto ...
Avatar del usuario Harold James Ashbrook
0 votos
2 respuestas
27 vistas

Como mantener el color de los elementos de un bloque usando background-image?

El problema es que cuando paso el cursor sobre la imagen esta se vuelve opaca afectando a los elementos del titulo, subtitulo y el boton. Como seria que solo la imagen se vuelva opaca sin afectar a ...
Avatar del usuario Fabricio Arciniega
0 votos
1 respuesta
581 vistas

como hacer para que cuando pase el cursor por un boton una imagen se oscuresca?

.visitanos__contenido-boton { background-color: #007bff; color: #fff; border-radius: 5px; border: none; padding: 13px 20px; position: absolute; top: 68%; left: 43%; cursor: pointer; ...
Avatar del usuario Fabricio Arciniega
0 votos
1 respuesta
27 vistas

¿Cómo hago que un div que contiene varios otros se mantenga en el centro cuando una de las imágenes que tiene dentro crece al hacer hover?

Estoy trabajando en un código de prueba para una tienda, y estaba haciendo que al hacer hover sobre una de las imágenes esta crezca durante 0.5 segundos (y que cuando quito el hover vuelva a su tamaño ...
Avatar del usuario Cristian Velarde
0 votos
1 respuesta
337 vistas

¿Cómo hago que mis transiciones vuelvan a su lugar gradualmente cuando quito el :hover?

Buenos días/tardes/noches gente de StackOverflow. Estoy trabajando en un código de CSS e hice unas transiciones de tipo translate de forma que cuando les coloco el cursor (es decir, que se activa el :...
Avatar del usuario Cristian Velarde
0 votos
2 respuestas
1k vistas

¿Como puedo hacer para que el label de mi input no se sobre escriba en el texto que ingresa mi usuario después de cambiar de casilla?

De ante mano muchas gracias! Sucede que tengo un input que tienen un label y lo edito mediante CSS para que el label se ubique dentro del input pero cuando le dan click en el input, el label se ubica ...
Avatar del usuario Andres Vargas
0 votos
1 respuesta
176 vistas

¿Cómo dar animaciones al aparecer un elemento cuando se hace click en un boton?

¿Me podrían ayudar? Tengo el siguiente código .login__part-one { width: 100%; background-color: inherit; border: none; transition: all 200ms ease-out; } .login__part-two { width: ...
Avatar del usuario joan cortes
0 votos
1 respuesta
214 vistas

Como validar el input con Css para darle un estilo a su label?

Tengo el siguiente codigo. .form-group{ position: relative; margin-bottom: 2.5rem; padding-top:1rem; } .form-group label{ position: absolute; top: 0; left: 0; ...
Avatar del usuario Max Jimenez
1 voto
2 respuestas
46 vistas

Un comportamiento inusual de position:bsolute; CSS "¿entienden esto?"

El código hace que: cuando hagas hover en cada div de clase ".columnas" la imagen de fondo de su div padre cambiara. ----El problema es: Cuando haces hover de izquierda a derecha todo ...
Avatar del usuario kraud
  • 521
0 votos
1 respuesta
266 vistas

CSS - Rotar cada letra de Item de Menu HTML

Tengo un menu normal de elementos al que quiero que cada letra de cada li a se rote -20 grados contra reloj. Sin embargo estruxture el codigo y no funciona. Normalmente podemos aplicar cambios a los ...
Avatar del usuario Angel Diaz
0 votos
1 respuesta
217 vistas

Evitar overflow cuando hago un translateX

Estoy diseñando una interfaz en la que necesito hacer un sidebar para mostrar un offcanvas clásico pero estoy teniendo un problema de diseño. Cuando se muestra el sidebar se tiene que mover hacia la ...
Avatar del usuario Rene Limon
  • 4,642
0 votos
2 respuestas
1k vistas

Spinner css centrado sobre elemento html con contenido visible (transparencia)

Tengo varios elementos HTML como los siguientes, y ya que no soy muy bueno con los efectos CSS, les agregué un Spinner prefabricado que me encontré en este sitio: CSS Spinner .loader, .loader:...
Avatar del usuario oijm17
  • 69
1 voto
0 respuestas
60 vistas

Como poner una imagen sesgada y en perspetiva por medio de CSS y adaptable a la imagen adjunta?

Como puedo acomodar la imagen para que se adapte al celular [ #capa1 { position: relative; top: 127px; left: 118px; transform: perspective(321px) rotateY(46deg) rotateX(70deg) ...
Avatar del usuario Mariano Andres Franco
1 voto
0 respuestas
66 vistas

desplazamiento circular de elementos animados con react native

La tecnología utilizada es React Native y su librería Animated. Comparto el siguiente componente que he creado para desplazar una figura por la pantalla: const Animacion6 = () => { const [...
Avatar del usuario InfiniteRoads
0 votos
1 respuesta
240 vistas

¿Cómo puedo extender un div con color de fondo tranformado con rotate?

intento hacer que un texto tenga color de fondo gris, le apliqué un color gris al contenedor del texto pero al transformarlo con rotate, deja de cubrir toda la página dejándome unos espacios en blanco ...
Avatar del usuario pwnaz
  • 57
0 votos
1 respuesta
73 vistas

¿Como agregar una clase a un elemento html y luego en la misma o en otra función quitársela?(Javascript)

Los pongo en contexto: Hice un slider de imágenes en la que cambio el background image al hacer click al boton de izquierda o derecha de mi slider, pero, quiero agregar un efecto de fade hacia la ...
Avatar del usuario Esau Rosales
1 voto
2 respuestas
598 vistas

Cubo mediante CSS

¿Cómo puedo crear un cubo con CSS? Mi intención es entender el funcionamiento del CSS en su aplicación a estructuras 3D.
user avatar
0 votos
2 respuestas
139 vistas

Animacion sencilla con CSS

estaba consultado como hacer animaciones simples pero llamativas con CSS e intente recrear una animación simple en la cual tenia un contenedor vació de 300px por 300px en donde quería que cuando el ...
Avatar del usuario NextByte
0 votos
1 respuesta
428 vistas

¿Como aplicar dos funciones de transformación css al mismo elemento?

estoy realizando un ejercicio en el sitio Acamica y me encuentro con que no puedo pasar el ejercicio, tal vez no entendí bien la lección. En este ejercicio debo de: Mover el elemento 45px a la ...
Avatar del usuario Ruslan López
1 voto
1 respuesta
1k vistas

como sobre poner un div con css y que solo se pueda ver parte de este div

hola que tal tengo una duda con respecto a css y como puedo lograr el diseño que me piden mostrar la parte de verde y amarillo el div que esta inclinado lo hago con transform: matrix(); pero lo que no ...
Avatar del usuario emilio paredes
1 voto
1 respuesta
837 vistas

Sesgar div con css

Buen día, he estado investigando un poco acerca de como realizar lo siguiente, pero lo que he encontrado a pesar de que es parecido a lo que quiero lograr no es exactamente lo que busco, lo que busco ...
Avatar del usuario jose marquez
2 votos
1 respuesta
169 vistas

Ninjas: Dadas unas coordenadas, sacar css transform (skew, rotate ) pintar una imagen

la API me devuelve unas coordenadas random que será el contenedor de la imagen, y estas coordenadas siempre serán un rectángulo pero puede que no tenga los angulos de 90 grados por lo que tengo que ...
Avatar del usuario David DP
0 votos
1 respuesta
518 vistas

¿Cómo conseguir que dos Divs se desplacen a diferente velocidad al hacer scroll?

Estoy trabajando en una web y necesitaría conseguir el siguiente efecto al hacer scroll. Tengo dos contenedores, uno con imágenes y otro con texto que se superpone al primero. Hasta aquí todo bien. La ...
Avatar del usuario Mahenstinfor
0 votos
1 respuesta
87 vistas

realizar un if de transform: translate3d

Tengo que realizar una funcionalidad a un plugin de carousel. Como hago para escribir un if que detecte si un div tiene el estilo "transform" menor a "translate3d(-650px, 0, 0)". Puede que ser con ...
Avatar del usuario Daijard
11 votos
1 respuesta
5k vistas

Efecto "Pulso" en CSS3

Hola, estoy intentado lograr un efecto de "Pulso" sobre un circulo, usando solo CSS3 puro. Abajo dejo un ejemplo de lo esperado. Es posible? Esperado Actual #circle { width: 70px; height: ...
Avatar del usuario nawelittle
0 votos
1 respuesta
170 vistas

Aplicar CSS a un <div> [duplicada]

Hola a todos, tengo una duda de qué manera puedo hacer con CSS que mi div se vea así, de sesgado por la mitad, saludos y espero sus comentarios, que tengan un excelente día.
Avatar del usuario WTFChamp
  • 101
7 votos
4 respuestas
3k vistas

¿Cómo mostrar una imagen cuando me apoyo en un div?

Tengo un div con ancho y largo fijo. Lo esperado sería que al pasar sobre este div, se muestre una imagen con una transición en una posición absoluta definida. Estoy usando solo CSS3 y Html. ...
Avatar del usuario nawelittle
2 votos
1 respuesta
1k vistas

Label flotante en elemento select

Estoy creando un label flotante que se comporta como si fuera un placeholder de la siguiente manera: body { padding:50px; } input[type="text"][required]:focus + label[placeholder]:before, ...
Avatar del usuario Hoose
  • 3,115
0 votos
0 respuestas
57 vistas

¿Como evitar que un texto dentro de un link se rote al usar transform en css? [duplicada]

a { margin-left: 10%; background: rgba(33, 150, 243, .8); text-decoration: none; width: 100px; padding: 5%; padding-left: 1%; padding-right: 1%; display: flex; flex-flow: ...
Avatar del usuario Michel Novellino
3 votos
2 respuestas
465 vistas

Animación CSS se ve a golpes en dispositivos iOS

En una app desarrollada con cordova (para iOS y Android), uso transformaciones y transiciones de CSS para animar un menú y que se abra/cierre cuando se pulse en un botón. El código es algo como esto (...
Avatar del usuario Alvaro Montoro
  • 49.8k
21 votos
3 respuestas
2k vistas

¿Cómo hacer un cilindro con css?

Estoy utilizando HTML y CSS para aprender/practicar transformaciones 2D y 3D y para ello estoy dibujando una pila 9v tridimensional (porque es sencilla y cuadradita). Hasta ahora todo ha sido sencillo ...
Avatar del usuario Alvaro Montoro
  • 49.8k