CSS Rotate - Open book cover - html

Question

I have an element that I am trying to get to open like a book cover outwards, however the code I have written makes it open inwards.
$('.item').click(function() {
$(this).toggleClass('open');
});
.item {
width: 200px;
height: 400px;
margin: 0 auto;
border-radius: 0%;
position: relative;
cursor: default;
}
.info-wrap {
width: 100%;
height: 100%;
border-radius: 0%;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
-ms-perspective: 800px;
perspective: 800px;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
top: 20px;
left: 20px;
background: #f9f9f9;
}
.info {
position: absolute;
width: 100%;
height: 100%;
border-radius: 0%;
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
-ms-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
z-index: 9999999;
}
.info > div {
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 0%;
background-position: center center;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
.info .info-back {
-webkit-transform: rotate3d(0, 1, 0, 180deg);
-moz-transform: rotate3d(0, 1, 0, 180deg);
-o-transform: rotate3d(0, 1, 0, 180deg);
-ms-transform: rotate3d(0, 1, 0, 180deg);
transform: rotate3d(0, 1, 0, 180deg);
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#103b72+0,13539f+50 */
background: #103b72;
/* Old browsers */
background: -moz-linear-gradient(left, #103b72 0%, #13539f 50%);
/* FF3.6-15 */
background: -webkit-linear-gradient(left, #103b72 0%, #13539f 50%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #103b72 0%, #13539f 50%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#103b72', endColorstr='#13539f', GradientType=1);
/* IE6-9 */
}
.info h3 {
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 14px;
margin: 0 15px;
padding: 40px 0 0 0;
height: 90px;
font-family: 'Open Sans', Arial, sans-serif;
text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.info-wrap {
background: #125daa;
}
.item.open .info {
-webkit-transform: rotate3d(0, 1, 0, 150deg);
-moz-transform: rotate3d(0, 1, 0, 150deg);
-o-transform: rotate3d(0, 1, 0, 150deg);
-ms-transform: rotate3d(0, 1, 0, 150deg);
transform: rotate3d(0, 1, 0, 150deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid-item item grid-item--width2 grid-item--height4">
<div class="item">
<div class="info-wrap">
<div class="info">
<div class="info-front" style="background: #333;">
<div class="align-center">
<div class="advent-date current">Test Title</div>
<h4 class="text-center">CLICK TO OPEN</h4>
</div>
</div>
<div class="info-back">
</div>
</div>
</div>
</div>
</div>
Demo

Answer 1

You need to make it rotate the other way and replace rotate3d(0,1,0, 150deg) by rotate3d(0,1,0, -150deg) on the .item.open .info :
$('.item').click(function() {
$(this).toggleClass('open');
});
.item {
width: 200px;
height: 400px;
margin: 0 auto;
border-radius: 0%;
position: relative;
cursor: default;
}
.info-wrap {
width: 100%;
height: 100%;
border-radius: 0%;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
-ms-perspective: 800px;
perspective: 800px;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
top: 20px;
left: 20px;
background: #f9f9f9;
}
.info {
position: absolute;
width: 100%;
height: 100%;
border-radius: 0%;
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
-ms-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
z-index: 9999999;
}
.info > div {
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 0%;
background-position: center center;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
.info .info-back {
-webkit-transform: rotate3d(0, 1, 0, 180deg);
-moz-transform: rotate3d(0, 1, 0, 180deg);
-o-transform: rotate3d(0, 1, 0, 180deg);
-ms-transform: rotate3d(0, 1, 0, 180deg);
transform: rotate3d(0, 1, 0, 180deg);
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#103b72+0,13539f+50 */
background: #103b72;
/* Old browsers */
background: -moz-linear-gradient(left, #103b72 0%, #13539f 50%);
/* FF3.6-15 */
background: -webkit-linear-gradient(left, #103b72 0%, #13539f 50%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #103b72 0%, #13539f 50%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#103b72', endColorstr='#13539f', GradientType=1);
/* IE6-9 */
}
.info h3 {
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 14px;
margin: 0 15px;
padding: 40px 0 0 0;
height: 90px;
font-family: 'Open Sans', Arial, sans-serif;
text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.info-wrap {
background: #125daa;
}
.item.open .info {
-webkit-transform: rotate3d(0, 1, 0, -150deg);
-moz-transform: rotate3d(0, 1, 0, -150deg);
-o-transform: rotate3d(0, 1, 0, -150deg);
-ms-transform: rotate3d(0, 1, 0, -150deg);
transform: rotate3d(0, 1, 0, -150deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid-item item grid-item--width2 grid-item--height4">
<div class="item">
<div class="info-wrap">
<div class="info">
<div class="info-front" style="background: #333;">
<div class="align-center">
<div class="advent-date current">Test Title</div>
<h4 class="text-center">CLICK TO OPEN</h4>
</div>
</div>
<div class="info-back">
</div>
</div>
</div>
</div>
</div>