En este artículo entenderemos Transform In en detalle y continúe con una demostración práctica detallada. En este artículo se cubrirán los siguientes consejos,
Con el avance en las funcionalidades del sitio web, es igualmente importante proporcionar integraciones inteligentes en su sitio web para hacerlo atractivo y mejor. Agregar varios elementos CSS que complementen su sitio es la necesidad del momento.
La gente se mantiene alejada de los sitios web que realmente no atraen a las masas. Entonces, ¿qué tal si intenta transformar algunos de los elementos y embellecer su CSS con un valor de compresión menor?
Para satisfacer necesidades similares, hemos transformado la propiedad CSS que transforma elementos al sesgarlos, rotarlos, escalarlos o traducirlos.
Continuando con este artículo sobre Transformar en CSS
¿Qué es transformar CSS?
Transformar un elemento CSS significa proporcionarle una ventaja en forma 2D o 3D. Cambia visualmente el estilo de un elemento.
La transformación 2D funciona en los ejes X e Y. Puede proporcionar cualquier borde o estructura en ambos ejes para realizar cambios. Mientras que para la transformación 3D, necesita trabajar en los ejes X, Y y Z para proporcionar la profundidad necesaria.
Propiedades de transformación CSS 2D:
| Función | Descripción |
matriz( n, n, n, n, n, n ) | Matriz de seis valores |
traducir( x,y ) | Permite que el elemento se mueva a lo largo de los ejes X e Y |
translateX ( norte ) | Permite que el elemento se mueva a lo largo del eje X |
traducirY ( norte ) | Permite que el elemento se mueva a lo largo del eje Y |
escala( x,y ) | Cambia el ancho y alto de los elementos. |
scaleX ( norte ) pasar por valor en java | Cambia el ancho del elemento |
scaleY ( norte ) | Cambia la altura de un elemento |
girar( ángulo ) | Permite rotar el elemento en un ángulo que se especifica en el parámetro |
sesgar( x-angle,y-angle ) | Inclina el elemento a lo largo de los ejes X e Y |
skewX ( ángulo ) | Inclina el elemento a lo largo del eje X |
sesgado ( ángulo ) | Inclina el elemento a lo largo del eje Y |
Propiedades de transformación CSS 3D:
Propiedad | Descripción |
transformar | Aplica una transformación 2D o 3D a un elemento. |
origen de transformación | Le permite cambiar la posición en elementos transformados |
estilo de transformación | Especifica cómo se renderizan los elementos anidados en el espacio 3D |
perspectiva | Especifica la perspectiva de cómo se ven los elementos 3D |
perspectiva-origen | Especifica la posición inferior de los elementos 3D diferencia entre anulación y sobrecarga |
visibilidad trasera | Define si un elemento debe ser visible cuando no está frente a la pantalla |
Por ejemplo:
css .element {ancho: 20px alto: 20px transformar: escala (20)}Ahora, cuando lo haga, el elemento definido se escalará 20 veces.
No solo esto, también puede escalar el eje para escalado horizontal y vertical.
transformar: escalaX (2) transformar: escalaY (.5)
Para proporcionar una transformación adecuada en todos los navegadores, puede:
div {-webkit-transform: scale (1.5) -moz-transform: scale (1.5) -o-transform: scale (1.5) transform: scale (1.5)}La propiedad de transformación CSS mejora el espacio de coordenadas del nivel de formato visual CSS.
¿Qué es el nivel de formato visual?
Nivel de formato visual significa procesar un documento y presentarlo visualmente en las plataformas de medios. Con el formato visual, puede transformar cada elemento como un modelo que concuerde con el modelo de caja CSS. El modelo de caja CSS define un elemento en un formato de caja rectangular estándar que define el tamaño, la posición y las propiedades.
Nota: Solo los elementos transformables pueden transformarse.
Continuando con este artículo sobre Transformar en CSS
¿Cuáles son las diversas propiedades de transformación?
Veamos todas las propiedades transformadoras:
1.escala (): Escalar significa cambiar el tamaño del elemento horizontal o verticalmente.
Para escalado vertical:scaleX
Para escala horizontal:scaleY
Para un elemento, también puede cambiar el tamaño de fuente, el relleno, la altura o el ancho. El valor predeterminado es 1, lo que también significa proporcionar 0,5 ya que el valor lo divide a la mitad, mientras que proporcionar 2 duplica la escala.
2. sesgar (): La propiedad Skew permite al usuario inclinar un elemento hacia la derecha o hacia la izquierda desde un punto de coordenadas. Es casi como convertir un rectángulo en un paralelogramo. Puede sesgar un elemento por sus coordenadas.
Ejemplo:
.element {transform: skewX (25deg)} .element {transform: skewY (25deg)Cuando lo hace, el elemento se inclina 25 grados horizontal y verticalmente utilizando skewX o skewY.
3. rotar ( ) : Puede rotar un elemento en el sentido de las agujas del reloj utilizando esta propiedad. Puede girarlo 180 grados o 360 grados para devolverlo a su lugar original.
.element {transform: rotate (25deg)}Para proporcionar rotación también, puede usar cualquiera de las tres dimensiones: rotateX, rotateY o rotateZ.
4. traducir ( ) : Puede mover un elemento correctamente hacia abajo o hacia los lados.
.element {transform: translate (20px, 10px)}Traducir moverá un objeto / elemento especificado al revés o de lado. El primer valor especificado mueve el objeto hacia la derecha (el negativo lo moverá hacia el lado izquierdo) y el segundo valor lo mueve hacia abajo (si especifica un valor negativo, lo moverá hacia arriba).
Si esto puede confundirlo, aplique el eje X para cambiar la posición del elemento horizontalmente y los ejes Y para cambiar la posición verticalmente. El aspecto más sorprendente de la propiedad de transformación es que, la aplicación de transformación solo permitirá que el elemento se mueva, manteniendo intactos todos los demás elementos o texto. La distancia generalmente se toma en píxeles o porcentajes.
Por ejemplo:
.element {transform: translateX (value) transform: translateY (value)}5. perspectiva (): puede proporcionar una profundidad en la perspectiva de un elemento. Permite dar una transformación 3D a un elemento haciéndolo cúbico en la transformación.
translate3d (x, y, z)
translateZ (z)
translate3d (x, y, z) translateZ (z)
La introducción del eje z le da al elemento una visualización 3D. translateZ () mueve el elemento hacia el espectador mientras que un valor negativo lo aleja.
6. matriz () : Combina todas las transformaciones en una.
rotar (45deg) traducir (24px, 25px)
La aplicación de matrix () combina todas las propiedades de transformación en una matriz.
La aplicación de propiedades de transformación puede mejorar enormemente su elemento y, por lo tanto, el atractivo de su sitio web. ¡Pruébalos!
Esto nos lleva al final de este artículo sobre Transformar en CSS.
diferencia entre hashmap y hashtable
Si está interesado en obtener más información sobre el desarrollo web, consulte la por Edureka. La capacitación para la certificación de desarrollo web lo ayudará a aprender a crear sitios web impresionantes usando HTML5, CSS3, Twitter Bootstrap 3, jQuery y las API de Google y a implementarlo en Amazon Simple Storage Service (S3).
Si todavía está interesado Si tiene alguna pregunta, puede publicarla en la sección de comentarios de este blog '¿Qué es CSS?' Y nos comunicaremos con usted lo antes posible.