Accéder à la propriété transform de CSS3 [Résolu]

kéraunos · 16/06/2011, 00h55

Bonjour.

Comment peut-on accéder aux valeurs de la propriété CSS3 "transform" d'un élément HTML donné? Tant pour les lire que pour les fixer.

Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
#el {
			background: blue;
			-moz-transform: translate(0px,10px) rotate(180deg);
			-webkit-transform: translate(0px,10px) rotate(180deg);
			transform: translate(0px,10px) rotate(30deg);
		}

Merci.

mekal · 16/06/2011, 20h38

pour modifier en javascript il faut faire comme ceci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
34
35
36
37
38
39
40
41
42
43
44
45
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>transform</title>
 
 
<script type="text/javascript">
 
var valeur_r=0
var valeur_t=0
 
function ttr(effet,elem){
 
if(effet=="rota"){
valeur_r=elem.previousSibling.value;
}
else if(effet=="trans"){
valeur_t=elem.previousSibling.value;
}
 
var el=document.getElementById('monelement')
 
var effet='rotate('+valeur_r+'deg)translateY('+valeur_t+'px)';
 
el.style.WebkitTransform=effet;
 
el.style.OTransform=effet;
 
el.style.MozTransform=effet;
 
el.style.Transform=effet;
}
 
</script>
</head>
<body>
<br>
 
		<div id='monelement'style="position:absolute;background-color:red;width:100px;height:100px;left:300px;top:200px" ></div>
		<br>rotation<input type='texte' /><button onclick="ttr('rota',this)">change</button>
		<br>translation<input type='texte' /><button onclick="ttr('trans',this)">change</button>
	</body>
</html>

si par exemple tu veut modifier juste la valeur en rotation et garder celle en translation il faudra donc indiquer la valeur de rotation mais aussi mettre la valeur de translation sinon celle ci se retrouvera a son origine c'est a dire zero

kéraunos · 18/06/2011, 17h41

Classe.

Merci beaucoup.

18/06/2011, 17h41	#3
kéraunos Membre régulier Inscription : janvier 2005 Messages : 157 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : janvier 2005 Messages : 157 Points : 71 Points : 71	Classe. Merci beaucoup.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email