Accéder à la propriété transform de CSS3

Invité · 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.

Invité · 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

Invité · 18/06/2011, 17h41

Classe.

Merci beaucoup.

Accéder à la propriété transform de CSS3

JavaScript

Discussions similaires

Partager

Partager