À l'aide des transformations 3D, nous pouvons déplacer des éléments vers l'axe des x, l'axe des y et l'axe z. Voici quelques méthodes de transformation 3D CSS3-
Les méthodes suivantes sont utilisées pour appeler la transformation 3D-
| Sr n,n,n,n,n,n,n,n,n,n,n. ,n,n) | sert à transformer des éléments en utilisant les 16 valeurs de la matrice |
|---|---|
| 2 | translate3d( x,y,z) sert à transformer des éléments en utilisant l'axe des x, L'axe y et l'axe z |
| 3 | translateX(x) sont utilisés pour transformer des éléments en utilisant l'axe x |
| 4 ETranslatey (y) | Utilisé pour utiliser la conversion de l'axe Y element |
| translatez (z) | pour l'utilisation de l'élément de conversion de l'axe Y |
| Exemple | Live Démonstration
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.container {
display: inline-block;
width: 200px;
height: 200px;
border: 1px solid #CCC;
margin-left: 20px;
}
.rotateX {
width: 100%;
height: 100%;
background: rgb(52, 0, 241);
transform: perspective(600px) rotateX(85deg);
}
.rotateY {
width: 100%;
height: 100%;
background: rgb(55, 0, 255);
transform: perspective(600px) rotateY(75deg);
}
.translateZ{
width: 100%;
height: 100%;
background: rgb(55, 0, 255);
transform: perspective(600px) translateZ(-200px);
}
</style>
</head>
<body>
<h1>3D transform function example</h1>
<div class="container">
<div class="rotateX"></div>
</div>
<div class="container">
<div class="rotateY"></div>
</div>
<div class="container">
<div class="translateZ"></div>
</div>
</body>
</html>Copier après la connexion | 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!
Comment localiser l'emplacement du téléphone portable de quelqu'un d'autre
Encyclopédie d'utilisation de Printf
Comment supprimer des pages vierges dans Word
instruction de sortie Java
Comment trader sur Binance
tutoriel vba
Il n'y a pas d'option WLAN dans Win11
Que signifie le HD du téléphone portable ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
