Exercices sur les transformations par CSS3

test des translations en CSS3

Écrire une page xHTML contenant :

un titre h1,
un titre h2,
faire en sorte que ce titre h2 soit décalé de 10 caractères (ex) en bas et 30 caractères à droite.

Fichier à produire :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <title>Test de la rotation</title>
  <style type="text/css">
    body {
       font-family:sans-serif;
       font-size:15px;
    }
    h1 {
      text-align:center;
      font-size:300%;
    }
    h2 {
      width:10em;
      margin:0;
      padding:0;
      background-color:#88F;
      color:#300;
      font-size:200%;
      transform: translate(20ex, 10ex);
      -o-transform: translate(20ex, 10ex);
      -ms-transform: translate(20ex, 10ex);
      -moz-transform: translate(20ex, 10ex);
      -webkit-transform: translate(20ex, 10ex);
    }
  </style>
</head>
<body>
 
  <h1>Test de la translation</h1>
  <h2>Voici un beau texte <em>décalé et bas et à droite</em></h2>
 
  <p><a href="http://validator.w3.org/check?uri=referer">page xHTML valide</a> et
    <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS valide</a></p>
</body>
</html>

voir le résultat

test des rotations en CSS3

Écrire une page xHTML contenant :

un titre h1,
un titre h2,
faire en sorte que le titre h2 soit vertical,

Fichier à produire :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <title>Test de la rotation</title>
  <style type="text/css">
    body {
       font-family:sans-serif;
       font-size:15px;
    }
 
    h1,h2 {
      text-align:center;
    }
 
    h1 {
      font-size:300%;
    }
 
    h2 {
      margin:10% 20%;
      padding:3em;
      transform: rotate(90deg);
      -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      -o-transform: rotate(90deg);
    }
    p {text-align:center}
  </style>
</head>
<body>
 
  <h1>Test de la rotation</h1>
  <h2>Voici un beau texte <em>vertical</em></h2>
 
  <p><a href="http://validator.w3.org/check?uri=referer">page xHTML valide</a> et
    <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS valide</a></p>
</body>
</html>

voir le résultat

test des grossisements en CSS3

Écrire une page xHTML contenant :

un titre h1,
un titre h2,
faire en sorte que le titre h2 soit :
- horizontalement 1.5 fois plus gros,
- verticalement 4 fois plus gros.

Fichier à produire :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <title>Test du grossissement</title>
  <style type="text/css">
    body {
       font-family:sans-serif;
       font-size:15px;
    }
 
    h1,h2 {
      text-align:center;
    }
 
    h1 {
      font-size:300%;
    }
 
    h2 {
      margin:10% 20%;
      padding:0.5em;
      background-color:#FCC;
      -webkit-transform: scale(1.5, 4);
      -moz-transform: scale(1.5, 4);
      -ms-transform: scale(1.5, 4);
      -o-transform: scale(1.5, 4);
      transform: scale(1.5, 4);
    }
    p {text-align:center}
  </style>
</head>
<body>
 
  <h1>Test du grossissement</h1>
  <h2>Voici un texte <em>grossi (X1.5 en X et X4 en Y)</em></h2>
 
  <p><a href="http://validator.w3.org/check?uri=referer">page xHTML valide</a> et
    <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS valide</a></p>
</body>
</html>

voir le résultat

test des cisaillements en CSS3

Écrire une page xHTML contenant :

un titre h1,
un titre h2,
faire en sorte que le titre h2 soit cisaillé horizontalement,

Fichier à produire :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <title>Test des cisaillements</title>
  <style type="text/css">
    body {
       font-family:sans-serif;
       font-size:15px;
    }
 
    h1,h2 {
      text-align:center;
    }
 
    h1 {
      font-size:300%;
    }
 
    h2 {
      margin:10% 20%;
      padding:3em;
      transform: skewX(20deg);
      -o-transform: skewX(20deg);
      -ms-transform: skewX(20deg);
      -moz-transform: skewX(20deg);
      -webkit-transform: skewX(20deg);
      background-color:#FFC;
    }
    p {text-align:center}
  </style>
</head>
<body>
 
  <h1>Test des cisaillements</h1>
  <h2>Voici un beau texte <em>cisaillé horizontalement</em></h2>
 
  <p><a href="http://validator.w3.org/check?uri=referer">page xHTML valide</a> et
    <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS valide</a></p>
</body>
</html>

voir le résultat

test des transformations matricielles en CSS3

Écrire une page xHTML contenant :

un titre h1,
un titre h2,
faire en sorte que le titre h2 soit orienté verticalement par rapport à son origine. pour cela nous utiliserons une transformation matricielle.

Fichier à produire :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <title>Test des transformations matricielles</title>
  <style type="text/css">
    body {
       font-family:sans-serif;
       font-size:15px;
    }
 
    h1 {
      text-align:center;
      font-size:300%;
    }
 
    h2 {
      position:absolute;
      top:0;
      left:0;
      width:800px;
      height:30px;
      padding:0;
      transform: matrix(0, 1, -1, 0, -385, 370);
      -o-transform: matrix(0, 1, -1, 0, -385, 370);
      -ms-transform: matrix(0, 1, -1, 0, -385, 370);
      -moz-transform: matrix(0, 1, -1, 0, -385, 370);
      -webkit-transform: matrix(0, 1, -1, 0, -385, 370);
      background-color:#F88;
    }
    p {text-align:center}
  </style>
</head>
<body>
 
  <h1>Test des transformations matricielles</h1>
  <h2>Voici un beau texte <em>tourné verticalement par rapport à son origine</em></h2>
 
  <p><a href="http://validator.w3.org/check?uri=referer">page xHTML valide</a> et
    <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS valide</a></p>
</body>
</html>

voir le résultat

test de l'ensemble des transformations en CSS3

Écrire une page xHTML contenant :

un titre h1,
un titre h2,
un titre h3,
un titre h4,
faire en sorte que :
- le titre h1 soit vertical et calé en haut à gauche,
- le titre h2 soit déformé par des cisaillement mixtes,
- le titre h3 subisse une transformations homothétique aboutissant à un grossissement de 2 et un angle de 45° (par matrice),
- le titre h4 soit translaté en bas et à droite.

Fichier à produire :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <title>Test de transformations multiples</title>
  <style type="text/css">
    body {
       font-family:sans-serif;
       font-size:15px;
    }
    h1 {
      width:10em;
      margin:0;
      padding:0;
      background-color:#000;
      color:#FFF;
      font-size:300%;
      -webkit-transform: translate(-50%,-50%) rotate(90deg) translate(50%,-50%) ;
      -moz-transform: translate(-50%,-50%) rotate(90deg) translate(50%,-50%) ;
      -ms-transform: translate(-50%,-50%) rotate(90deg) translate(50%,-50%) ;
      -o-transform: translate(-50%,-50%) rotate(90deg) translate(50%,-50%) ;
      transform: translate(-50%,-50%) rotate(90deg) translate(50%,-50%) ;
      /* -webkit-transform: translate(-50%,-50%) rotate(90deg) translate(50%,-50%)*/ ;
    }
    h2 {
      margin:10% 20%;
      padding:3em;
      -webkit-transform: skew(20deg,15deg);
      -moz-transform: skew(20deg,15deg);
      -ms-transform: skew(20deg,15deg);
      -o-transform: skew(20deg,15deg);
      transform: skew(20deg,15deg);
      background-color:#FFC;
      text-align:center;
    }
    h3 {
      text-align:center;
      background-color:hsl(0, 100%, 50%);
      opacity:0.5;
      -webkit-transform:matrix(1.414, -1.414, 1.414, 1.414, 0, 0);
      -moz-transform:matrix(1.414, -1.414, 1.414, 1.414, 0, 0);
      -ms-transform:matrix(1.414, -1.414, 1.414, 1.414, 0, 0);
      -o-transform:matrix(1.414, -1.414, 1.414, 1.414, 0, 0);
      transform:matrix(1.414, -1.414, 1.414, 1.414, 0, 0);
    }
    h4 {
      text-align:center;
      width:50%;
      background-color:hsl(60, 100%, 50%);
      -webkit-transform:translate(50%, 3em);
      -moz-transform:translate(50%, 3em);
      -ms-transform:translate(50%, 3em);
      -o-transform:translate(50%, 3em);
      transform:translate(50%, 3em);
    }
    em {color:#600}
    p {text-align:center}
  </style>
</head>
<body>
 
  <h1>Test de la rotation</h1>
  <h2>Voici un beau texte <em>déformé</em></h2>
  <h4>et pour finir un texte décalé de 50% à droite et de 3em en bas</h4>
  <h3>Ceci est une démonstration des transformations matricielles</h3>
 
  <p><a href="http://validator.w3.org/check?uri=referer">page xHTML valide</a> et
    <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS valide</a></p>
</body>
</html>