有人可以幫助我在這個3D盒上使用transform-origin屬性嗎？

Question

我在CSS中玩3D：http://codepen.io/Varin/pen/VKrdvG

我想要做的就是能夠將立方體的每一側的樞軸點更改爲立方體的邊緣。當前的懸停效果是我想要實現的，儘管我必須這樣做的方式不僅是旋轉頂部平面，還會用translateX和translateZ（請參閱CSS的最後幾行）移動它，因爲樞軸點設置在飛機中部。我需要做些什麼來改變它到廣場的邊緣？以下是完整的代碼：

編輯ps。我知道，改變原產地爲支點莫名其妙負責，但我無法得到它的權利......

$color1:rgba(0, 
 
0, 
 
0, 
 
0.66); 
 
body { 
 
    background: #fff; 
 
} 
 
.container { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    //width: 100vh; 
 
    height: 100vh; 
 
    //position: relative; 
 
    perspective: 1000px; 
 
    perspective-origin: 50% 100px; 
 
    transition-duration: 5s; 
 
} 
 
.cube { 
 
    //background: #000; 
 
    position: relative; 
 
    width: 200px; 
 
    height: 200px; 
 
    transform-style: preserve-3d; 
 
} 
 
.cube div { 
 
    background: url(https://pbs.twimg.com/profile_images/690103442493276160/nAc_RInP.png); 
 
    background-size: cover; 
 
    background-position: center center; 
 
    opacity: 0.95; 
 
    // border: solid 1px red; 
 
    position: absolute; 
 
    width: 200px; 
 
    height: 200px; 
 
    box-shadow: inset 0px 0px 30px 10px rgba(0, 0, 0, 0.5); 
 
} 
 
.cube .bottom { 
 
    box-shadow: inset 0px 0px 30px 10px rgba(0, 0, 0, 0.5), 0px 0px 100px 46px rgba(0, 0, 0, 0.5); 
 
} 
 
.back { 
 
    transform: translateZ(-100px) rotateY(180deg); 
 
} 
 
.right { 
 
    transform: rotateY(-270deg) translateX(100px); 
 
    transform-origin: top right; 
 
} 
 
.left { 
 
    transform: rotateY(270deg) translateX(-100px); 
 
    transform-origin: center left; 
 
} 
 
.top { 
 
    transform: rotateX(-90deg) translateY(-100px); 
 
    transform-origin: top center; 
 
    transition-duration: 2s; 
 
} 
 
.bottom { 
 
    transform: rotateX(90deg) translateY(100px); 
 
    transform-origin: bottom center; 
 
} 
 
.front { 
 
    transform: translateZ(100px); 
 
} 
 
@keyframes spin { 
 
    from { 
 
    transform: rotateY(0); 
 
    } 
 
    to { 
 
    transform: rotateY(360deg); 
 
    } 
 
} 
 
.cube { 
 
    animation: spin 10s infinite linear; 
 
    &: hover { 
 
    .top { 
 
     transform: rotateX(-125deg) translateY(-80px) translateZ(-55px); 
 
    } 
 
    } 
 
}

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

Answer 1

你需要總是一個翻譯，但至少你可以將其設置爲可以均勻應用旋轉。也就是說

transform: translateZ(-100px) rotateX(90deg); 

或

transform: translateZ(-100px) rotateX(135deg); 

body { 
 
    background: #fff; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    height: 100vh; 
 
    perspective: 1000px; 
 
    perspective-origin: 50% 100px; 
 
    transition-duration: 5s; 
 
} 
 

 
.cube { 
 
    position: relative; 
 
    width: 200px; 
 
    height: 200px; 
 
    transform-style: preserve-3d; 
 
} 
 

 
.cube div { 
 
    background: url(https://pbs.twimg.com/profile_images/690103442493276160/nAc_RInP.png); 
 
    background-size: cover; 
 
    background-position: center center; 
 
    opacity: 0.95; 
 
    position: absolute; 
 
    width: 200px; 
 
    height: 200px; 
 
    box-shadow: inset 0px 0px 30px 10px rgba(0, 0, 0, 0.5); 
 
} 
 

 
.cube .bottom { 
 
    box-shadow: inset 0px 0px 30px 10px rgba(0, 0, 0, 0.5), 0px 0px 100px 46px rgba(0, 0, 0, 0.5); 
 
} 
 

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

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

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

 
.top { 
 
    transform: translateZ(-100px) rotateX(90deg); 
 
    transform-origin: top center; 
 
    transition-duration: 2s; 
 
} 
 

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

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

 
@keyframes spin { 
 
    from { 
 
    transform: rotateY(0); 
 
    } 
 
    to { 
 
    transform: rotateY(360deg); 
 
    } 
 
} 
 
.cube { 
 
    animation: spin 10s infinite linear; 
 
} 
 
.cube:hover .top { 
 
    transform: translateZ(-100px) rotateX(135deg); 
 
}

<div class="container"> 
 
    <div class="cube"> 
 
    <div class="front"></div> 
 
\t \t <div class="back"></div> 
 
\t \t <div class="top"></div> 
 
\t \t <div class="bottom"></div> 
 
\t \t <div class="left"></div> 
 
\t \t <div class="right"></div> 
 
    </div> 
 
</div>