Transformation 3D CSS3

Transformations 3D

CSS3 vous permet d'utiliser des transformations 3D pour formater des éléments.

Dans ce chapitre, vous apprendrez certaines de ces méthodes de transformation 3D :

rotateX()

rotateY()

Comment ça marche ?

La transformation est un effet qui fait qu'un élément change sa forme, sa taille et sa position.

Vous pouvez transformer vos éléments à l'aide de transformations 2D ou 3D.

méthode rotateX()

méthode rotateX(), fait pivoter un élément autour de son axe X d'un degré donné.

méthode rotateY()

méthode rotateY(), fait pivoter un élément autour de son axe Y à un degré donné.

Formation continue

nouveau fichier

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>3D旋转的Demo</title> 
 <style> 
 #experiment { 
 -webkit-perspective: 800; 
 -webkit-perspective-origin: 50% 50%; 
 -webkit-transform-style: -webkit-preserve-3d; 
 } 
 #block { 
 width: 200px; 
 height: 200px; 
 background-color: pink; 
 margin: 100px auto; 
 -webkit-transition: background-color 3s; 
 } 
 #block:hover { 
 background-color: purple; 
 } 
 #ep { 
 text-align: center; 
 } 
 #ep input { 
 width: 800px; 
 } 
 </style> 
 <script> 
 function rotate() { 
 var x = document.getElementById("rotateX").value; 
 var y = document.getElementById("rotateY").value; 
 var z = document.getElementById("rotateZ").value; 
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX