此3D盒子的原产地？
我在CSS中玩3D：http://codepen.io/Varin/pen/VKrdvG
我想要做的是能够将立方体每边的枢轴点更改为立方体的边缘。 当前的悬停效果是我想要实现的，尽管我必须这样做的方式不仅是旋转顶部平面，还会用translateX和translateZ（请参阅CSS的最后几行）移动它，因为枢轴点设置在飞机中部。 我需要做些什么来改变它到广场的边缘？ 以下是完整的代码：
编辑ps。 我知道transform-origin对于支点有点负责任，但是我无法做到......
$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>你将需要一个翻译，但至少你可以设置它，以便旋转可以统一应用。 那是
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>
<div class="back"></div>
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</div>