La fonction de transformation 2D est utilisée pour appliquer une transformation 2D à un élément, qui peut être pivoté, déplacé, mis à l'échelle et incliné.
Traduction - Déplace un élément le long des axes x et y.
Scale - Redimensionnez un élément dans la direction x y.
Rotate - Déplacer un élément dans une certaine mesure.
Tilt - Inclinez l'élément dans la direction x y.
Voici le code qui montre la fonction de transformation 2D en CSS -
Live Demo
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
width: 100px;
height: 100px;
background-color: rgb(255, 0, 128);
border:2px solid rgb(0, 35, 150);
margin: 20px;
display: inline-block;
color: white;
}
.rotate {
transform: rotate(20deg);
}
.translate {
transform: translate(30px, 20px);
}
.scale {
transform: scale(2, 1);
margin-left:70px;
}
.skew {
transform: skew(20deg);
}
</style>
</head>
<body>
<h1>2D transform functions example</h1>
<div class="rotate">ROTATE()</div>
<div class="skew">SKEW()</div>
<div class="scale">SCALE()</div>
<div class="translate">TRANSLATE()</div>
</body>
</html>Le code ci-dessus produira la sortie suivante -
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Utilisation de caractères arbitraires dans les expressions régulières
Comment acheter et vendre du Bitcoin sur Binance
L'amplificateur de signal wifi est-il utile ?
La différence entre le lecteur C et le lecteur D
ASUS f83se
Construire un serveur Internet
Quelles sont les applications de l'Internet des objets ?
Comment basculer entre pleine largeur et demi-largeur
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
