CSS旋转 - 打开书籍封面

时间：2015-11-25 11:08:38

标签： html css css3 css-transforms

我有一个元素，我想要打开就像向外翻书，但是我写的代码使它向内打开。

$('.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

1 个答案:

答案 0 :(得分：2)

您需要将其旋转为另一种方式并将rotate3d(0,1,0, 150deg)替换为rotate3d(0,1,0, -150deg)上的.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>

相关问题
最新问题