Rotate mais pas pour tout l'ensemble

Version imprimable

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:

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.

13/02/2019, 10h14
Invité

Bonjour,

le tourner dans l'autre sens. :aie:

Code:

transform: rotate(-45deg);
13/02/2019, 10h46
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:

<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.
13/02/2019, 11h02
charlieda

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

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

Merci
18/02/2019, 11h55
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.
18/02/2019, 12h20
Invité
Bonjour,

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

1 2 3 button.vjs-big-play-button { transform: rotate(-45deg); }
Sinon, montre au moins tes codes HTML et CSS.
18/02/2019, 12h24
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.
18/02/2019, 13h03
Invité

As-tu une page en ligne ?

OK, vu.

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

Code:

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);
}

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:

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

19/02/2019, 08h08
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.