Foros aprenderaprogramar.com

Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: paramonso en 19 de Junio 2017, 16:48

Título: CSS. Efectos dinámicos Transform: rotate, scale, skew, translate. CU01062D
Publicado por: paramonso en 19 de Junio 2017, 16:48
Hola. Entrega de CSS desde cero Ejercicio CU01062D del curso práctico de desarrollos web con CSS.


#skew {   transform:skew(-35deg); }
 Al ser un valor positivo inclina (estira) la caja hacia top-left y bottom rigth
 Si fuera un valor negativo inclinaría (estiraría) la caja hacia top-rigth y bottom-left

#scale {  transform:scale(1,0.5); }
El primer valor del paréntesis es el ancho la figura, el segundo valor el alto
Con este valor la figura se queda igual de ancha y se hace un poco mas baja
Con valores negativos tiene el mismo efecto pero gira la caja 180 grados

#rotate {   transform:rotate(45deg); }
Gira la caja 45 grados en el sentido de las agujas del reloj

#translate {   transform:translate(10px, 20px); }
El primer valor mueve la caja hacia la derecha la cantidad de pixels indicados
El segundo valor mueve la caja hacia bajo los pixels indicados    
                        
#rotate-skew-scale-translate {transform:skew(30deg) scale(1.1,1.1) rotate(40deg) translate(10px, 20px); }

skew(30deg) inclina (estira) la caja 30 grados top-rigth left-bottom
scale(1.1,1.1) transforma la caja a una escala superior de la que tiene
rotate(40deg) gira la caja 40 grados en el sentido de las agujas del reloj
translate(10px, 20px) mueve la caja 10px hacia la derecha y 20px hacia abajo
Título: Re:CSS desde cero Ejercicio Entrega 62 CU01062D
Publicado por: pedro,, en 25 de Junio 2017, 00:41
Hola paramonso

Las respuestas son correctas aunque algo escuetas si nos ceñimos a lo que pide el apartado "b" del ejercicio, donde habría que explicar a quién afectarían estos efectos.

Por otra parte, faltaría el código del apartado "a"

Saludos. ;D