css transform open div to right like a "book" cover - css

Question

Hi for a webshop i want the product block to open like a book. and show a image on de inside-left (when opened)
i tried to do this. It works ok but i want the black div to open to the left. this one will contain the image. When i put a negivate -180 degrees it does not seem to work ok.
.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

Your problem with transform-origin not with rotation degree, in your case:
-webkit-transform-origin: 100%; 0;
// ^ X ^ Y
That means x-axis offset 100% of div (full offset on x-axis)
No problem, Now just reset the origin to zero ( to start rotation from begin of div ) like this :
-webkit-transform-origin: 0;
Also don't forget float: right because the div will open to the left.
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>