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 {em>的x-axis偏移100%（x轴上的完全偏移）

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

-webkit-transform-origin: 0;

也不要忘记float: right因为div会向左打开。

CSS / HTML：

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;