2
我在CSS中玩3D:http://codepen.io/Varin/pen/VKrdvG有人可以幫助我在這個3D盒上使用transform-origin屬性嗎?
我想要做的就是能夠將立方體的每一側的樞軸點更改爲立方體的邊緣。當前的懸停效果是我想要實現的,儘管我必須這樣做的方式不僅是旋轉頂部平面,還會用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>
謝謝!我發現順序很重要,先翻譯,然後旋轉。我認爲我遇到的問題是我沒有意識到順序很重要,而且我也沒有意識到,當我想添加轉換時,我必須記住我需要重複以前的所有定位步驟。 。 感謝你的回答! – Varin