トランスレート回転順序

Question

私は3Dキューブを作るプロジェクトに取り組んでいました。 CSSで間違いを探すのに何時間も費やしました。私は何も見つけることができませんでした。その後、私はコードを手に入れ始めました。私の娯楽に翻訳の前に変換を使用している場合、 transform: translateX(value px) rotateY(value deg); のように、結果は壊れたキューブになります。キューブの上、右、左の辺にのみ影響します。 キューブの裏側と裏側に逆効果がありますが、transform: rotateX(vlaue deg) translateY(value px);は背中と谷がつぶれています。ここにはJSFiddleがあります。

Answer 1

希望これは

は、2つの注文を変換考える

役立ちます：

1. transform: translateX(value px) rotateY(value deg);

この場合、回転Yが最初に行われ、その後、移動X、そしてあなたが原因transform-originの壊れたキューブを取得しているがこれを取り除くと完璧です。

変換元プロパティが変換変換に適用された場合 機能は結果に明らかな視覚的差異がないことを意味します。 これは、変換の影響を受ける要素が、 の形、サイズ、または回転を変更せずに移動されたためです。

.wrap { 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-pack: center; 
 
    -webkit-justify-content: center; 
 
     -ms-flex-pack: center; 
 
      justify-content: center; 
 
    -webkit-box-align: center; 
 
    -webkit-align-items: center; 
 
     -ms-flex-align: center; 
 
      align-items: center; 
 
    -webkit-perspective: 800px; 
 
      perspective: 800px; 
 
    -webkit-perspective-origin: 50% 100px; 
 
      perspective-origin: 50% 100px; 
 
    margin-top: 150px; 
 
} 
 

 
.cube { 
 
    position: relative; 
 
    width: 200px; 
 
    -webkit-transform-style: preserve-3d; 
 
      transform-style: preserve-3d; 
 
    -webkit-animation: spin 10s linear infinite; 
 
      animation: spin 10s linear infinite; 
 
} 
 

 
.cube div { 
 
    position: absolute; 
 
    width: 200px; 
 
    height: 200px; 
 
    text-align: center; 
 
    color: #66cc00; 
 
    background: pink; 
 
} 
 

 
.cube .back { 
 
    -webkit-transform: translateZ(-100px) rotateY(180deg); 
 
      transform: translateZ(-100px) rotateY(180deg); 
 
} 
 

 
.cube .front { 
 
    -webkit-transform: translateZ(100px); 
 
      transform: translateZ(100px); 
 
} 
 

 
.cube .right { 
 
    -webkit-transform: translateX(100px) rotateY(-270deg); 
 
      transform: translateX(100px) rotateY(-270deg); 
 
} 
 

 
.cube .left { 
 
    -webkit-transform: translateX(-100px) rotateY(270deg); 
 
      transform: translateX(-100px) rotateY(270deg); 
 
} 
 

 
.cube .top { 
 
    -webkit-transform: translateY(-100px) rotateX(-90deg); 
 
      transform: translateY(-100px) rotateX(-90deg); 
 
} 
 

 
.cube .bottom { 
 
    -webkit-transform: translateY(100px) rotateX(90deg); 
 
      transform: translateY(100px) rotateX(90deg); 
 
} 
 

 
@-webkit-keyframes spin { 
 
    from { 
 
    -webkit-transform: rotateY(0); 
 
      transform: rotateY(0); 
 
    } 
 
    to { 
 
    -webkit-transform: rotateY(360deg); 
 
      transform: rotateY(360deg); 
 
    } 
 
} 
 

 
@keyframes spin { 
 
    from { 
 
    -webkit-transform: rotateY(0); 
 
      transform: rotateY(0); 
 
    } 
 
    to { 
 
    -webkit-transform: rotateY(360deg); 
 
      transform: rotateY(360deg); 
 
    } 
 
}

<div class="wrap"> 
 
     <div class="cube"> 
 
     <div class="front">front</div> 
 
     <div class="back">back</div> 
 
     <div class="top">top</div> 
 
     <div class="bottom">bottom</div> 
 
     <div class="left">left</div> 
 
     <div class="right">right</div> 
 
     </div> 
 
    </div>

2. transform: rotateX(value deg) translateY(value px);

この場合、移動Yが最初に行われ、その後、回転X、あなたは変換-起源をproperty.Itあなたは変換の位置を変更することができます必要があります要素。

ここ

変換原点は、その完了second.Thusとして回転Xに適用される 変換原点素子は素子全体

を移動させるよりもむしろ を変換する点を変更します