transform-origin:100%在transform rotate中不起作用。

Question

当有人将鼠标悬停在手册上时，我想创建一个向左和向右打开的手册。我使用 transform-origin: 0% 和 transform: rotateY(-180deg) 来使手册的左侧向左打开（红色和蓝色卡片）。对于右侧，我当然会使用 transform-origin: 100% 和 transform: rotateY(180deg) 向右打开 (绿色卡片)。

但右侧的实际行为是，它应用了transform-origin: 0% 并旋转到手册的左侧后面（这就是为什么您看不见它，但它确实存在）。

我无法理解为什么transform-origin: 100%没有生效。

这里是代码：https://jsfiddle.net/eL6q3hp4/2/。

.book-container {
  height: 350px;
  width: 250px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px;
}

.book-part {
  height: auto;
  width: auto;
  position: absolute;
  transform-style: preserve-3d;
  top: 0;
  left: 0;
}

.book-part > .card {
  height: 350px;
  width: 250px;
  position: absolute;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* RIGHT SITE */
.right-part {
  transform-origin: 0%;
}
.right-card {
  transform: rotateY(-180deg);
}
.book-container:hover .right-part {
  transform: rotateY(180deg);
  transition: 0.7s;
  transition-delay: 0.3s;
}

/* LEFT SITE */
.left-part {
  transform-origin: 100%;
}
.left-card {
  transform: rotateY(180deg);
}
.book-container:hover .left-part {
  transform: rotateY(-180deg);
  transition: 0.7s;
}


.middle-card {
  background-color: blue;
}

.right-card {
  background-color: green;
}

.left-card {
  background-color: red;
}

.front-card {
  background-color: yellow;
}

    <div class="book-container">
        <div class="book-part middle-part">
            <div class="card middle-card"></div>
        </div>
        <div class="book-part right-part">
            <div class="card right-card"></div>
        </div>
        <div class="book-part left-part">
            <div class="card left-card"></div>
            <div class="card front-card"></div>
        </div>
    </div>

- Darius Mann

---

你介意我编辑你的问题将代码直接放在问题中吗？ - symlink

你可以这样做，谢谢。 - Darius Mann

img标签没有图片是有意为之的吗？ - Rainbow

我的错误，把img标签当作div标签来考虑。 - Darius Mann

你的元素宽度为0，所以变换原点不会有任何作用。 - Temani Afif

谢谢Temani Afif。这就是问题所在。 - Darius Mann

Answer 1

移除 .book-part 的绝对定位并反转旋转值。您还可以在右侧块中添加一个前置卡片。

我还为关闭效果添加了过渡效果：

.book-container {
  height: 350px;
  width: 250px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  perspective: 1000px;
}

.book-part {
  transform-style: preserve-3d;
}

.book-part>.card {
  height: 350px;
  width: 250px;
  position: absolute;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}


/* RIGHT SITE */

.right-part {
  transform-origin: 0%;
  transition: 0.7s;
}

.right-card {
  transform: rotateY(180deg);
}

.book-container:hover .right-part {
  transform: rotateY(-180deg);
  transition-delay: 0.3s;
}


/* LEFT SITE */

.left-part {
  transform-origin: 100%;
  transition: 0.7s;
  transition-delay: 0.3s;
}

.left-card {
  transform: rotateY(-180deg);
}

.book-container:hover .left-part {
  transform: rotateY(180deg);
  transition-delay: 0s;
}

<div class="book-container">
  <div class="book-part middle-part">
    <div class="card middle-card" style="background:blue"></div>
  </div>
  <div class="book-part right-part">
    <img class="card right-card" style="background:green">
    <img class="card front-card" style="background:pink;">
  </div>
  <div class="book-part left-part">
    <img class="card left-card" style="background:red"> 
    <img class="card front-card" style="background:yellow">
  </div>
</div>

你也可以像下面这样简化你的代码：

.book-container {
  height: 350px;
  width: 250px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  perspective: 1000px;
  background:blue;
}
.book-container > div{
  transform-style: preserve-3d;
}

.book-container > div:before,
.book-container > div:after{
  content:"";
  height: 350px;
  width:100%;
  position: absolute;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  background:yellow;
}


/* RIGHT SITE */
.right-part {
  transform-origin: 0%;
  transition: 0.7s;
}

.book-container .right-part:before {
  transform: rotateY(180deg);
  background:green;
}

.book-container:hover .right-part {
  transform: rotateY(-180deg);
  transition-delay: 0.3s;
}


/* LEFT SITE */
.left-part {
  transform-origin: 100%;
  transition: 0.7s;
  transition-delay: 0.3s;
}

.book-container .left-part:before {
  transform: rotateY(180deg);
  background:red;
}

.book-container:hover .left-part {
  transform: rotateY(180deg);
  transition-delay: 0s;
}

<div class="book-container">
  <div class="right-part">
  </div>
  <div class="left-part">
  </div>
</div>

- Temani Afif

Answer 2

我不知道在原始情况下你是否使用动态尺寸（在这种情况下，此解决方案将不适用），但是您可以使用像素值来设置transform-origin以使其正常工作：

.book-container {
  height: 350px;
  width: 250px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px;
}

.book-part {
  height: auto;
  width: auto;
  position: absolute;
  transform-style: preserve-3d;
  top: 0;
  left: 0;
}

.book-part > .card {
  height: 350px;
  width: 250px;
  position: absolute;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* RIGHT SITE */
.right-part {
  transform-origin: 250px;
}
.right-card {
  transform: rotateY(180deg);
}
.book-container:hover .right-part {
  transform: rotateY(180deg);
  transition: 0.7s;
  transition-delay: 0.3s;
}

/* LEFT SITE */
.left-part {
  transform-origin: 0%;
}
.left-card {
  transform: rotateY(-180deg);
}
.book-container:hover .left-part {
  transform: rotateY(-180deg);
  transition: 0.7s;
}


.middle-card {
  background-color: blue;
}

.right-card {
  background-color: green;
}

.left-card {
  background-color: red;
}

.front-card {
  background-color: yellow;
}

<div class="book-container">
        <div class="book-part middle-part">
            <div class="card middle-card"></div>
        </div>
        <div class="book-part right-part">
            <div class="card right-card"></div>
        </div>
        <div class="book-part left-part">
            <div class="card left-card"></div>
            <div class="card front-card"></div>
        </div>
    </div>

- Johannes