La méthode de transformation CSS: skew() [3sti]

On testera dans cette activité la méthode skew() de css3, commencer par créer un fichier activiteskew.html

<!DOCTYPE html>
<html>
<head>
	<title>activite skew</title>
	<link rel="stylesheet" type="text/css" href="activiteskew.css" />
</head>
<body>
    <h1>skew()</h1>
<p>incline l'élément dans un espace bidimensionnel horizontalement et verticalement ou simultanément dans deux directions</p>
    <img class="original_pic" src="image1.jpg" alt="image1">
    <img class="after_skew" src="image2.jpg" alt="image2">
</body>
</html>

associer le premier fichier à un deuxieme fichier css activiteskew.css

        .original_pic {
            transform: translate(10px, 12%);
        }
        .after_skew {
            transform-origin: top right;
            transform: skew(30deg, 0deg);
        }

Tester le résultat!

Leave a Reply

Your email address will not be published. Required fields are marked *