css 将打开的 div 转换为右侧，如 "book"封面

Question

您好，对于网上商店，我希望产品 block 像书本一样打开。并在 de inside-left 上显示图像(打开时)

我试过这样做。它工作正常，但我希望黑色 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 

这意味着 x 轴 偏移 100% 的 div (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>