變換翻譯旋轉訂單

Question

我正在製作3D立方體的項目。我花了幾個小時在CSS中尋找錯誤。我無法找到任何。然後我開始擺弄代碼。爲了我的娛樂，如果我在轉換之前使用translate翻譯像 transform: translateX(value px) rotateY(value deg); 結果將是一個破碎的立方體。它隻影響立方體的頂部，右側和左側。 雖然在立方體的底面和背面有相反的效果，即transform: rotateX(vlaue deg) translateY(value px);正在讓我摺疊回來和底部。這裏是JSFiddle。

Answer 1

希望這有助於

考慮兩個變換命令：

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

在這種情況下旋轉Y首先完成，然後平移X，你會得到一個破碎的立方體，因爲transform-origin property.If你刪除它將是完美的。

將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做第一，然後rotateX，所以你需要變換原點property.It允許你改變的變換位置元素。

在這裏變換原點被應用於rotateX作爲其處理完畢second.Thus 變換原點改變指元件變換 而不是移動整個元件

點