html - 有人可以帮我解决这个 3D 盒子上的 transform-origin 属性吗？

Question

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

我想要做的是能够将立方体每一侧的轴心点更改为立方体的边缘。当前的悬停效果是我想要实现的，尽管我必须这样做的方式不仅是旋转顶平面，而且还使用 translateX 和 translateZ 移动它(参见 CSS 的最后几行)，作为枢轴点设置为平面的中间。我需要做什么才能将其更改为正方形的边缘？这是完整的代码:

编辑附言。我知道 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>

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>
		<div class="back"></div>
		<div class="top"></div>
		<div class="bottom"></div>
		<div class="left"></div>
		<div class="right"></div>
  </div>
</div>