web-dev-qa-db-ja.com

垂直軸を中心に45度要素を回転

下の画像に示すように、一連の要素があります。

enter image description here

それらは片側に45度回転されます（-45度の内側のコンテンツは直立したままです）。

次に、各要素を垂直軸を中心に回転させ、要素の中心を通過させます。 45度の角度になっているため、RotateYは機能しません。

これをどうやってやりますか？

cssrotationcss-transforms
6
Philex

コツは、45度回転する前にこの回転を設定することです。

回転を期待どおりに動作させるには、基本状態で回転を0に設定する必要があることにも注意してください。

.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

これが私が質問を解釈する方法です。デモには多くの構造が必要なので、デモにはあまり満足していません。しかし、おそらく動作を確認できますか？

基本的に、ラッパーを使用してy軸を中心に回転させます。変換の原点を中心に設定することが重要です。追加のラッパーは、マウスホバーのちらつきを防ぐために使用されます。

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

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

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

私はあなたのコードがどのように見えるか正確にはわかりませんが、単純な回転タイル（div）の場合は、次のようなことを試します：

_@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>_

transform: rotate3d();を使用して、親divを使用せずにそれを行うこともできますが、簡単にするために、次のようにしました。

0
Rein