简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Article  >  interface Web  >  Utilisation des fonctions de transformation 3D CSS3

Utilisation des fonctions de transformation 3D CSS3

王林
王林avant
2023-09-16 14:33:07911parcourir

À 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-

5 La fonction de transformation 3D CSS3 ci-dessous est Code - Exemple Le code ci-dessus produira la sortie suivante -
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

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>

Sortie

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!

css3
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Que sont les pseudo-classes CSSArticle suivant：Que sont les pseudo-classes CSS

Articles Liés

Voir plus