web-dev-qa-db-fra.com

Faire pivoter l'élément de 45 degrés autour de l'axe vertical

J'ai une série d'éléments, comme le montre l'image ci-dessous:

enter image description here

Ils sont tournés de 45 degrés d'un côté (le contenu à l'intérieur de -45 degrés, pour rester debout).

Maintenant, je voudrais faire pivoter chaque élément autour d'un axe vertical, en passant par le centre de l'élément. RotateY ne fonctionne pas, car il est à un angle de 45 degrés.

Comment vous y prendriez-vous?

cssrotationcss-transforms
6
Philex

L'astuce consiste à définir cette rotation avant la rotation à 45 degrés:

Notez également que pour que la rotation se comporte vraiment comme prévu, vous devez la définir sur 0 dans l'état de base

.container {
    width: 200px;
    height: 200px;
    margin: 100px;
    border: solid 1px;
    transform: rotateY(0deg) rotate(45deg); /* needs Y at 0 deg to behave properly*/
    transition: transform 2s;
}


.container:hover {
    transform:  rotateY(180deg) rotate(45deg); /* notice the order */
}
.inner {
    margin: 50px;
    transform: rotate(-45deg);
}
<div class="container">
<div class="inner">INNER</div>
</div>
14
vals

C'est ainsi que j'interprète la question. Je ne suis pas très content de la démo car elle a besoin de beaucoup de structure. Mais peut-être pouvez-vous vérifier le comportement?

Fondamentalement, j'utilise un wrapper pour tourner sur l'axe des y. Il est essentiel de définir l'origine de la transformation au centre. L'encapsuleur supplémentaire est utilisé pour éviter un scintillement au survol de la souris.

https://jsfiddle.net/nm59mqky/1/

.tile {
  transform: rotateY(0);
  transform-Origin: center center;  
}

.wrapper:hover .tile {
  transform: rotateY(180deg);
}
2
Philipp Lehmann

Je ne sais pas exactement à quoi ressemble votre code, mais pour une simple tuile tournante (div) j'essaierais quelque chose comme ceci:

@keyframes rotate-vertical {
        0% {
                transform: rotate3d(0, 1, 0, 0deg);
        }
        100% {
                transform: rotate3d(0, 1, 0, 360deg);
        }
}

body {
  padding: 20px;
}

.tile {
  width: 65px;
  height: 65px;
  background-color: red;
  text-align: center;
  transform: rotate3d(0, 0, 1, 45deg);
  display: inline-block;
}

.turndiv {
  width: 65px;
}

.turndiv:hover {
        animation: rotate-vertical 1.1s ease-out;
 }
<div class="turndiv">
  <div class="tile">
  </div>
</div>

Vous pouvez simplement le faire avec transform: rotate3d(); et sans div parent, mais pour garder les choses faciles, je l'ai fait comme ça.

0
Rein