javacript rotation sur axe de symetrie horizontal puis vertical

Version imprimable

bonjour
j'ai ce javascript qui me fait tourner une image horizontalement puis verticalement
si je le met dans la balise th d'un tableau ca marche, si je le met dans une div la rotation ne se fait pas suivant l'axe de symetrie
comment y remedier pour le mettre dans une div?
et est-ce faisable aussi en ajax?

Code:

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
46
47
48
49
50
51
52
var wdmax = 170;
var hdmax = 145;
var ImAgE = '../monimage1.gif';
var MiRoIr = '../monimage2.gif';
var wdmin = 0;
var hdmin = 0;
var inc = 5;
var vIt = 50;
var poI = 7000;
var poM = 4000;
var tourner = 'mafonction';
function mafonction() {
    if (window.mouvement) {
        setTimeout('mafonction()', 1);
        return;
    }
    if (tourner == 'mafonction') {
        var wd = document.getElementById('monimage').getAttribute('width');
        wd = wd - inc;
        document.getElementById('monimage').setAttribute('width', wd);
        if (wd == wdmin) {
            document.getElementById('monimage').setAttribute('src', ImAgE);
            inc = - inc;
        }
        if (wd == wdmax) {
            tourner = 'testons';
            inc = - inc;
            setTimeout('mafonction()', poI);
        } 
        else {
            setTimeout('mafonction()', vIt);
        }
    } 
    else {
        var hd = document.getElementById('monimage').getAttribute('height');
        hd = hd - inc;
        document.getElementById('monimage').setAttribute('height', hd);
        if (hd == hdmin) {
            document.getElementById('monimage').setAttribute('src', MiRoIr);
            inc = - inc;
        }
        if (hd == hdmax) {
            tourner = 'mafonction';
            inc = - inc;
            setTimeout('mafonction()', poM);
        } 
        else {
            setTimeout('mafonction()', vIt);
        }
    }
}
window.onload = setTimeout('mafonction()', 3000);

13/09/2016, 19h15
NoSmoking

Bonjour,
difficile à dire sans voir le CSS que tu appliques à tes éléments notamment la largeur et la hauteur.

Tu pourrais faire quelque chose de plus actuel via le CSS3 et transform: rotateY() (effet FLIP) ou rapide avec transform:scale(-1).
14/09/2016, 15h57
pouemes
bonjour no smoking et merci de ta reponse
en fait je viens de trouver une solution justement en applicant ce css qui permet de centrer mon image verticalement et horizontalement sur deux div, c'est la seule maniere de faire que j'ai trouve qui semble compatible avec les differents navigateur
tu crois que je pourrais remplacer mon javascript par quelque chose de plus moderne? suis plutot debutant dans tous ces languages
Code:

1 2 3 4 5 6 7 8 9 #parent { display:table } #child { display:table-cell; vertical-align:middle; text-align:center }
15/09/2016, 19h19
NoSmoking

Citation:

tu crois que je pourrais remplacer mon javascript par quelque chose de plus moderne?

oui et tu as trouvé en partie la réponse vu ta discussion sur le forum CSS.

Tu peux donc passer cette discussion en résolue.