css将open div向右转换为类似于"书;掩蔽

Question

嗨，对于网店来说，我希望产品块像书一样打开。并在左内侧（打开时）上显示图像

我试过这样做。它工作正常，但我希望黑色div向左打开。这个将包含图像。当我把负180度时，它似乎不太好用。

                    .left,
                    .right {
                      width: 100%;
                      height: 200px;
                      float: left;
                      color: white;
                      position: absolute;
                    }
                    .left {
                      background: red;
                      -webkit-border-top-left-radius: 100px;
                      -webkit-border-bottom-right-radius: 100px;
                      -moz-border-radius-topleft: 100px;
                      -moz-border-radius-bottomright: 100px;
                      border-top-left-radius: 100px;
                      border-bottom-right-radius: 100px;
                      height: 250px;
                      padding: 0;
                      border: 10px solid #10832d;
                    }
                    .right {
                      background: black;
                      -webkit-border-top-left-radius: 100px;
                      -webkit-border-bottom-right-radius: 100px;
                      -moz-border-radius-topleft: 100px;
                      -moz-border-radius-bottomright: 100px;
                      border-top-left-radius: 100px;
                      border-bottom-right-radius: 100px;
                      height: 250px;
                      padding: 0;
                      border: 10px solid #10832d;
                    }
                    .wrapper {
                      perspective: 1000px;
                      perspective-origin: 100%;
                      100%;
                      ;
                      -webkit-perspective: 1000px;
                      -webkit-perspective-origin: 100%;
                      100%;
                      ;
                    }
                    .wrapper:hover .right {
                      transform: rotate3d(0, 1, 0, -180deg);
                      transform: rotateY(180deg);
                      transform-origin: 100%;
                      0;
                      transition: transform 1s;
                      -webkit-transform: rotateY(180deg);
                      -webkit-transform-origin: 100%;
                      0;
                      -webkit-transition: -webkit-transform 1s;
                    }

<div style="width:50%">
  <div class="col-md-3 wrapper" style="position:relative;min-height:250px;">
    <div class="left">sdfsdf</div>
    <div class="right">sdfdsfds</div>
  </div>
</div>

Answer 1

您的transform-origin问题不是rotation degree问题，在您的情况下：

-webkit-transform-origin: 100%; 0;
//                        ^ X   ^ Y 

这意味着div的x-axis偏移100%（x轴上的完全偏移）

没问题，现在只需将原点重置为零（从div的开始开始旋转），如下所示：

-webkit-transform-origin: 0;

另外，不要忘记float: right，因为div将向左打开。

CSS/HTML:

.left,.right {
width:100%;
height:200px;
color:#FFF;
position:absolute;
}
.left {
background:red;
-webkit-border-top-left-radius:100px;
-webkit-border-bottom-right-radius:100px;
-moz-border-radius-topleft:100px;
-moz-border-radius-bottomright:100px;
border-top-left-radius:100px;
border-bottom-right-radius:100px;
height:250px;
border:10px solid #10832d;
padding:0;
}
.right {
background:#000;
-webkit-border-top-left-radius:100px;
-webkit-border-bottom-right-radius:100px;
-moz-border-radius-topleft:100px;
-moz-border-radius-bottomright:100px;
border-top-left-radius:100px;
border-bottom-right-radius:100px;
height:250px;
border:10px solid #10832d;
padding:0;
}
.wrapper {
perspective:1000px;
perspective-origin:100%;
-webkit-perspective:1000px;
-webkit-perspective-origin:100%;
}
.wrapper:hover .right {
transform:rotateY(180deg);
transform-origin:0;
transition:transform 1s;
-webkit-transform:rotateY(-180deg);
-webkit-transform-origin:0;
-webkit-transition:0 1s;
}

<div style="width:50%; float:right">
  <div class="col-md-3 wrapper" style="position:relative;min-height:250px;">
    <div class="left">left side</div>
    <div class="right">right side</div>
  </div>
</div>