Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • 3 - Transformaciones CSS y Javascript

    Cargado por

    Edwin del rosario
    35 vistas34 páginas

    Título original

    3 - Transformaciones CSS y Javascript.pptx

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PPTX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

    © All Rights Reserved
    Descargue como PPTX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    35 vistas34 páginas

    3 - Transformaciones CSS y Javascript

    Cargado por

    Edwin del rosario

    Copyright:

    © All Rights Reserved
    Descargue como PPTX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 34

    Transformaciones CSS

    Que es?
    • Conjunto de propiedades css que se
    utilizan para aplicar efectos visuales a
    elementos html.
    • Incluidos Transformaciones 2D y 3D  ,
    • Las propiedades principales para
    realizar transformaciones son:
    transform, transform-origin,
    transform-style
    Transform

    Transform

    • Propiedad mediante la cual podemos


    indicar una o varias transformaciones
    para realizar sobre un elemento
    Transform

    Transformaciones

    • translate • scale.
    • rotate. • skew.
    Transform

    translate
    • Realiza una transformación en la que mueven un
    elemento de un lugar a otro.

    • Si especificamos un valor • Si especificamos un valor


    positivo en el eje Y positivo en el eje X
    (vertical), lo moveremos (horizontal), lo moveremos
    hacia abajo, con un valor hacia la derecha, con un
    negativo, lo moveremos valor negativo, lo
    hacia arriba moveremos a la izquierda
    Transform

    translate
    • translate(x, y): Traslada el elemento una distancia X
    horizontalmente y a una distancia Y verticalmente.
    • translateX(x): Traslada el elemento una distancia X
    horizontalmente.
    • translateY(y): Traslada el elemento una distancia Y
    verticalmente.
    translate
    .translate-div {

      transform: translate(10px, 20px);

      transform: translate(-10px, -20px);

      transform: translateX(10px);

      transform: translateY(20px);

      transform: translateX(-10px);

      transform: translateY(-20px);

    }
    Transform

    scale

    • Realizan una transformación en la que aumentan o


    reducen el tamaño de un elemento basándose en el
    parámetro indicado
    • El parametro es un factor de escala
    Transform

    scale
    • scale(fx, fy): Re-escala el elemento a un nuevo
    tamaño con un factor fx horizontal y un factor fy
    vertical.
    • scaleX(fx): Re-escala el elemento a un nuevo tamaño
    con un factor fx horizontalmente.
    • scaleY(fy): Re-escala el elemento a un nuevo tamaño
    con un factor fy verticalmente.
    scale
    .scale-element {

      transform: scale(2, 2);

    .scale-element-2 {

      transform: scaleX(2);

      transform: scaleY(2);

    }
    Transform

    rotate

    • Gira un elemento a un número de grados indicados


    Transform

    rotate
    • rotate(deg): Establece una rotación 2D en dirección
    deg grados.
    • rotateX(deg): Establece una rotación 2D en dirección
    deg grados sólo para el eje horizontal X.
    • rotateY(deg): Establece una rotación 2D en dirección
    deg grados sólo para el eje vertical Y
    rotate
    .rotate-element {

      transform: rotate(90deg);

    .rotate-element-2 {

      transform: rotateX(90deg);

      transform: rotateY(10deg);

    }
    Transform

    skew

    • Establece un ángulo para torcer o inclinar un elemento


    Transform

    skew
    • skew(xdeg, ydeg): Establece un ángulo xdeg en el eje
    X y ydeg en eje Y, para una deformación 2D.
    • skewX(xdeg): Establece un ángulo xdeg para una
    deformación 2D respecto al eje X.
    • skewY(ydeg): Establece un ángulo ydeg para una
    deformación 2D respecto al eje Y.
    .skew { skew
      transform: skew(10deg, 10deg);

    .skew-2 {

      transform: skew(10deg);

    .skew-x {

      transform: skewX(10deg);

      transform: skewY(10deg);

    }
    JavaScript
    JavaScript

    Que es?

    • JavaScript es un lenguaje de programación que se


    utiliza principalmente para crear páginas web
    dinámicas.
    • JavaScript es un lenguaje de programación
    interpretado.
    • JavaScript no guarda ninguna relación directa con
    el lenguaje de programación Java.
    JavaScript

    Que es?
    • Fue creado por Brendan Eich, en Netscape, para
    ser incorporado en el browser Netscape Navigator
    2.0, que iba a lanzarse en 1995. Inicialmente se
    denominó LiveScript.
    • Netscape firmó una alianza con Sun
    Microsystems para su desarrollo, justo antes del
    lanzamiento se decidió cambiar el nombre por el
    de JavaScript. La razón fue exclusivamente por
    marketing.
    JavaScript

    Que es?

    • En 1997 se envió la especificación JavaScript 1.1 al


    organismo ECMA (European Computer
    Manufacturers Association).
    • Ultimo release estable es el ECMAScript 2018.
    Incluir JavaScript en HTML
    <html>

      <head>

        <script>

          var msg = 'this is the message';

          alert(msg)

        </script>

      </head>

      <body>

        <div></div>

      </body>

    </html>
    JavaScript

    sintaxis
    • Conjunto de reglas que deben seguirse al escribir
    el código fuente de los programas para
    considerarse como correctos para ese lenguaje de
    programación.
    • La sintaxis de JavaScript es muy similar a la de
    otros lenguajes de programación como Java y C
    JavaScript

    sintaxis
    • No se tienen en cuenta los espacios en blanco y las
    nuevas líneas.
    • Case sensitive.
    • No se define el tipo de las variables.
    • No es necesario terminar cada sentencia con el
    carácter de punto y coma (;).
    • Se pueden incluir comentarios de dos tipos: de
    una linea y de multiples lineas
    Programación Basica
    JavaScript

    Variables
    • Es un elemento que se emplea para almacenar y
    hacer referencia a otro valor.
    • En JavaScript de definen usando las palabras
    reservadas var y let

    var msg = 'this is a message';

    let otherMsg = 'this is another message';
    JavaScript

    Tipos Variables

    Number String
    var edad = 10 var msg = 'this is a message';

    var distancia = 10.50 var msgWithDobleQuotes = "this is a message";

    Boolean Array
    var valido = true;
    var frutas = ['Mango', "Manzana", "Limon"]
    var invalido = false;
    JavaScript

    Operadores
    • Asignación: Es el más utilizado. Este operador se
    utiliza para guardar un valor específico en una
    variable. El símbolo utilizado es = .
    var numero1 = 3;

    var numero2 = 4;

    // Ahora, la variable numero1 vale 5

    numero1 = 5;

    // Ahora, la variable numero1 vale 4
    JavaScript

    Operadores
    • Matemáticos: Son operadores utilizados para
    realizar operaciones matemáticas, Los operadores
    definidos son: suma (+), resta (-), multiplicación
    (*) y división (/).
    var numero1 = 10;

    var numero2 = 5;

    var resultado = 0;

    resultado = numero1 / numero2;  // resultado = 2

    resultado = 3 + numero1;        // resultado = 13

    resultado = numero2 - 4;        // resultado = 1

    resultado = numero1 * numero2;  // resultado = 50
    JavaScript

    Operadores
    • Relacionales: Son utilizados para comparar variables. mayor
    que (>), menor que (<), mayor o igual (>=), menor o igual
    (<=), igual que (==) y distinto de (!=).
    var numero1 = 3;

    var numero2 = 5;

    resultado = numero1 > numero2; // resultado = false

    resultado = numero1 < numero2; // resultado = true

    numero1 = 5;

    numero2 = 5;

    resultado = numero1 >= numero2; // resultado = true

    resultado = numero1 <= numero2; // resultado = true
    JavaScript

    Operadores

    • Lógicos: se utilizan para tomar decisiones sobre


    las instrucciones que debería ejecutar el programa
    en función de ciertas condiciones.
    JavaScript

    Operadores Lógicos

    • Negación: Se utiliza para obtener el valor contrario


    al valor de la variable, se indica mediante el
    símbolo ! .

    var visible = true;

    alert(!visible);  
    JavaScript

    Operadores Lógicos
    • AND: El operador se indica mediante el símbolo
    &&. Su resultado es true si los dos operandos son
    true.
    var valor1 = true;

    var valor2 = false;

    resultado = valor1 && valor2; // resultado = false

    valor1 = true;

    valor2 = true;

    resultado = valor1 && valor2; // resultado = true
    JavaScript

    Operadores Lógicos
    • OR: El operador se indica mediante el símbolo ||.
    Su resultado es true si los alguno de los dos
    operandos son true.
    var valor1 = true;

    var valor2 = false;

    resultado = valor1 || valor2; // resultado = true

    valor1 = false;

    valor2 = false;

    resultado = valor1 || valor2; // resultado = false
    JavaScript

    También podría gustarte