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.
35 preguntas
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 ...