origin property on this 3D box?

I'm playing around with 3D in CSS: http://codepen.io/Varin/pen/VKrdvG

What I want to do is to be able to change the pivot point of each side of the cube to the edge of the cube. The current hover effect is what I want to achieve, although the way I had to do it is to not only rotate the top plane, but also move it about with translateX and translateZ (see the few last lines of the CSS), as the pivot point is set for the middle of the plane. What do I need to do to change it to the edge of the square? Here is the full code:

EDIT ps. I know that transform-origin is somehow responsible for the pivot point, but I can't get it right...

$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>

---

You will need always a translation, but at least you can set it so that the rotation can be uniformly applied. That is

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

or

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>

链接地址: http://www.djcxy.com/p/71226.html

上一篇: 原点返回到CSS中元素的中心

下一篇: 此3D盒子的原产地？