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> ...
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; ...
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 ...
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 ...
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 ...
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 ...
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; ...
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 ...
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 :...
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 ...
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: ...
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; ...
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 ...
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 ...
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 ...
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:...
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) ...
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 [...
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 ...
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 ...
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.
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 ...
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. ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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: ...
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.
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, ...
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: ...
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 (...
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 ...