Discussion :

[charlieda]

Bonjour à toutes et à tous,

J'ai un petit souci.

J'ai crée un code css pour avoir un carré arrondi tourné à 45 deg.
Jusque là, tout va bien.

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
 
    font-size: 3em;
    line-height: 3em;
    height: 2.5em;
    width: 2.5em;
    display: block;
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 0;
    cursor: pointer;
    /* opacity: 1; */
    border: .06666em solid red;
    background-color: #01725DE;
    border-radius: 25px;
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    -ms-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
    transform: rotate(45deg);

Dans ce "logo" il y a un triangle (logo PLAY) mais du coup ce triangle est rotate aussi de 45deg.

Comment puis je faire pour qu'il reste à 0deg

Merci d'avance pour votre aide.

Bonne journée.

[Invité]

Bonjour,

le tourner dans l'autre sens.

Code :

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

    transform: rotate(-45deg);

[charlieda]

Bonjour jreaux62,

Je te remercie pour ta réponse rapide. Effectivement, j'ai pas pensé à ça pourtant je l'avais lu en son temps. Bref.

En fait, c'est un script déjà fait et je veux modifier quelques petites choses au niveau graphique.

Le problème est que sur ce coup, je suis perdu.

Code html :

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

<button class="vjs-big-play-button" type="button" title="Play Video" aria-disabled="false"><span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text" aria-live="polite">Play Video</span></button>

Voici le code que j'ai trouvé dans le devtool de chrome concernant le bouton.

Je crois comprendre qu'en fait tout le bouton est dans le même code css.

J'ai bien line-height: 3em qui fait bouger le fameux logo PLAY mais c'est bien tout se qui se passe.

Si j'applique un -45, forcement ça annule mon +45.

Merci d'avance pour vos aides et pistes.

[charlieda]

C'est bon. J'ai trouvé la partie du code à modifier.

En fait le logo PLAY est à part dans le CSS.

Merci

[charlieda]

Bonjour à toutes et à tous,

Je reviens sur le sujet.

En fait, j'ai quand même un problème que je n'arrive pas à résoudre.

Je veux faire un logo bouton PLAY dans un lecteur vidéo.

Quand j'applique le rotate de 45deg, forcément ça me fait tourner le logo que j'ai fait et c'est le but.
J'ai bien trouvé pour éviter que le logo PLAY au milieu du logo (merci jreaux62) en faisant un courte effet rotate

Mais ce même logo PLAY est utilisé également dans la barre de contrôle du dessous et donc il subit un rotate de 45deg : un peu gênant point de vue graphique.

Le problème est que je ne le retrouve pas dans le code. Il semblerait que ce soit des fichiers .js

Bref donc ma question.

Est il possible de faire un losange avec bords arrondis sans utiliser le rotate ?

Merci d'avance.

[Invité]

Bonjour,

Il suffit de définir clairement quel élément est ciblé :

Code css :

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

1
2
3
button.vjs-big-play-button {
   transform: rotate(-45deg);
}

Sinon, montre au moins tes codes HTML et CSS.

[charlieda]

Merci à toi pour tes réponses toujours précises et rapides

C'est bien là mon problème. Je n'arrive pas à différencier les éléments.

Ils se basent tous les deux sur la même ligne css.

Je vais continuer à fouiller parce que le devtools de Chrome est très bien quand c'est du Html, php ou css mais avec le .JS, gloups je suis perdu.

[Invité]

As-tu une page en ligne ?

[Invité]

OK, vu.

En fait, il suffit de n'appliquer l'instruction QUE sur le sélecteur visé :

Code css :

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

1
2
3
4
5
6
.video-js .vjs-big-play-button .vjs-icon-placeholder::before, .video-js .vjs-play-control .vjs-icon-placeholder::before, .vjs-icon-play::before {
    content: "\f101";
}
.video-js .vjs-big-play-button .vjs-icon-placeholder::before {
    transform: rotate(-45deg);
}

[charlieda]

Je te remercie d'avoir pris le temps de te pencher sur mon problème. Un grand merci.

Bon, soit je suis depuis trop longtemps sur la même chose, soit je suis bouché (partons sur la 2eme hypothèse)

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
 
.vjs-icon-play, .video-js .vjs-big-play-button, .video-js .vjs-play-control {
  font-family: VideoJS;
  font-weight: normal;
  font-style: normal; }
  .vjs-icon-play:before, .video-js .vjs-big-play-button:before, .video-js .vjs-play-control:before {
    content: "\f101"; }
 
.video-js .vjs-big-play-button .vjs-icon-placeholder::before {
    transform: rotate(-45deg);
}
 
.video-js .vjs-big-play-button {
  font-size: 3em;
  line-height: 2.5em;
  height: 2.5em;
  width: 3em;
  display: block;
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 0;
  cursor: pointer;
  opacity: 1;
  border: 0.06666em solid #fff;
  background-color: #0175DE;
  transform: rotate(45deg);
  border-radius: 25px;
 
}

Ca ne change rien. Vraiment, ce code me perturbe.

Merci

[charlieda]

Un très grand merci, cela fonctionne.

J'avais oublié une modification dans un autre fichier css. Faut dire qu'il y en a partout.

Bonne journée.