Médiaforma

Guide de survie – Transformations 2D

Print Friendly, PDF & Email

Translations

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Translations</title>
    <style>
      div
      {
        width: 200px;
        height: 60px;
        background-color: SkyBlue;
        margin: 20px;
        border-color: black;
        border-width: 5px;
        border-style: dashed;
      }
      .droite
      {
        -webkit-transform : translate(20px, 0px);
        -moz-transform : translate(20px, 0px);
        -o-transform : translate(20px, 0px);
        -ms-transform : translate(20px, 0px);
      }
      .gauche
      {
        -webkit-transform : translate(-20px, 0px);
        -moz-transform : translate(-20px, 0px);
        -o-transform : translate(-20px, 0px);
        -ms-transform : translate(-20px, 0px);
      }
      .haut
      {
        -webkit-transform : translate(0px, -5px);
        -moz-transform : translate(0px, -5px);
        -o-transform : translate(0px, -5px);
        -ms-transform : translate(0px, -5px);
      }
      .bas
      {
        -webkit-transform : translate(0px, 20px);
        -moz-transform : translate(0px, 20px);
        -o-transform : translate(0px, 20px);
        -ms-transform : translate(0px, 20px);
      }
      .hautdroite
      {
        -webkit-transform : translate(15px, -15px);
        -moz-transform : translate(15px, -15px);
        -o-transform : translate(15px, -15px);
        -ms-transform : translate(15px, -15px);
      }
    </style>
  </head>
  <body>
    <div>
      Boîte sans déplacement
    </div>
    <div class="droite">
      Boîte déplacée à droite de 20px
    </div>
    <div class="gauche">
      Boîte déplacée à gauche de 20px
    </div>
    <div class="haut">
      Boîte déplacée vers le haut de 5px
    </div>
    <div class="bas">
      Boîte déplacée vers le bas de 5px
    </div>
    <div class="hautdroite">
      Boîte déplacée vers le haut et la droite de 15px
    </div>
    <div class="quex">
      Boîte déplacée de 80px vers la droite
    </div>
  </body>
</html>

Rotations

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Rotations</title>
    <style>
      div
      {
        width: 200px;
        height: 60px;
        background-color: SkyBlue;
        margin-top: 120px;
        border-color: black;
        border-width: 5px;
        border-style: dashed;
        display: inline-block;
      }
      .rotdroite45
      {
        -webkit-transform : rotate(45deg);
        -moz-transform : rotate(45deg);
        -o-transform : rotate(45deg);
        -ms-transform : rotate(45deg);
      }
      .rotgauche90
      {
        -webkit-transform : rotate(-90deg);
        -moz-transform : rotate(-90deg);
        -o-transform : rotate(-90deg);
        -ms-transform : rotate(-90deg);
      }
    </style>
  </head>
  <body>
    <div style="border-width: 5px;">
      La <div> originale
    </div>
    <div class="rotdroite45">
      La <div> après une rotation à droite de 45°
    </div>
    <div class="rotgauche90">
      La <div> après une rotation à gauche de 90°
    </div>
  </body>
</html>

Définir le centre de la transformation

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Définition du centre de la rotation</title>
    <style>
      div
      {
        width: 200px;
        height: 60px;
        background-color: SkyBlue;
        margin-top: 120px;
        border-color: black;
        border-width: 5px;
        border-style: dashed;
        display: inline-block;
      }
      .rd45-olefttop
      {
        -webkit-transform : rotate(45deg);
        -moz-transform : rotate(45deg);
        -o-transform : rotate(45deg);
        -ms-transform : rotate(45deg);
        -webkit-transform-origin: left top;
        -moz-transform-origin: left top;
        -o-transform-origin: left top;
        -ms-transform-origin: left top;
      }
      .rd45-ocenterbottom
      {
        -webkit-transform : rotate(45deg);
        -moz-transform : rotate(45deg);
        -o-transform : rotate(45deg);
        -ms-transform : rotate(45deg);
        -webkit-transform-origin: center bottom;
        -moz-transform-origin: center bottom;
        -o-transform-origin: center bottom;
        -ms-transform-origin: center bottom;
      }
    </style>
  </head>
  <body>
    <div style="border-width: 5px;">
      La <div> originale
    </div>
    <div class="rd45-olefttop">
      La <div> après une rotation à droite de 45°
    </div>
    <div class="rd45-ocenterbottom">
      La <div> après une rotation à droite de 45°
    </div>
    <br>
    <div style="border-width: 5px;">
      La <div> originale
    </div>
    <div class="rd45-olefttop">
      La <div> après une rotation à droite de 45°
    </div>
    <div class="rd45-olefttop">
      La <div> après une rotation à droite de 45°
    </div>
  </body>
</html>

Changements d’échelle

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Changements d'échelle</title>
    <style>
      .e200
      {
        -webkit-transform : scale(2);
        -moz-transform : scale(2);
        -o-transform : scale(2);
        -ms-transform : scale(2);
      }
      .e50
      {
        -webkit-transform : scale(.5);
        -moz-transform : scale(.5);
        -o-transform : scale(.5);
        -ms-transform : scale(.5);
      }
    </style>
  </head>
  <body>
    <img src="ecureuil.jpg">
    <img src="ecureuil.jpg" class="e200">
    <img src="ecureuil.jpg" class="e50">
  </body>
</html>

Inclinaison

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Inclinaison</title>
    <style>
      img
      {
        margin-top: 60px;
        margin-left: 40px;
      }
      .xy15
      {
        -webkit-transform : skew(15deg, 15deg);
        -moz-transform : skew(15deg, 15deg);
        -o-transform : skew(15deg, 15deg);
        -ms-transform : skew(15deg, 15deg);
      }
      .xy-25
      {
        -webkit-transform : skew(-25deg, -25deg);
        -moz-transform : skew(-25deg, -25deg);
        -o-transform : skew(-25deg, -25deg);
        -ms-transform : skew(-25deg, -25deg);
      }

    </style>
  </head>
  <body>
    <img src="ecureuil.jpg">
    <img src="ecureuil.jpg" class="xy15">
    <img src="ecureuil.jpg" class="xy-25">
  </body>
</html>

Matrices

Tester le code


<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8" />
    <title>Matrices de transformation</title>
    <style>
      img
      {
        margin-top: 60px;
        margin-left: 40px;
      }
      .mat90
      {
        -webkit-transform : matrix(0, 1, -1, 0, 0, 0);
        -moz-transform : matrix(0, 1, -1, 0, 0, 0);
        -o-transform : matrix(0, 1, -1, 0, 0, 0);
        -ms-transform : matrix(0, 1, -1, 0, 0, 0);
      }

    </style>
  </head>
  <body>
    <img src="ecureuil.jpg">
    <img src="ecureuil.jpg" class="mat90">
  </body>
</html>

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.