CODEWITHSUNDEEP
jquerycsstransformcss-transitionspreserve-3d
Wahid Polin
Wahid Polin

Reputation: 101

css 3d transform page flip effect - controling the transition

Everything works fine but if you look closely after clicking on it the transition is ok till the mid point and then it snaps to place.And if you click again the reverse flip snaps to the middle point and then the transition is ok.

And also if you look closer something move behind when the actual flipping is happening.

I apologize for my messy code in advance.

here is the js fiddle link of my code

page flip jsfiddle

here is the code

$(function() {
  $('.on-top').on('click', function() {
    $('.on-top .kami-peek-mask').removeClass('hover-rotate');
    $('.on-top .kami-peek-mask').removeClass('click-rotate-reverse');
    $('.on-top .kami-peek-mask').addClass('click-rotate');
    $('.on-top').removeClass('click-zindex-top');
    $('.on-bottom').removeClass('click-zindex-bottom');
    $('.on-top').addClass('click-zindex-bottom');
    $('.on-bottom').addClass('click-zindex-top');

  })

  $('.on-bottom').on('click', function() {
    $('.on-top .kami-peek-mask').removeClass('click-rotate');
    $('.on-top .kami-peek-mask').addClass('click-rotate-reverse');
    $('.on-top').removeClass('click-zindex-bottom');
    $('.on-top').addClass('click-zindex-top');
    $('.on-bottom').removeClass('click-zindex-top');
    $('.on-bottom').addClass('click-zindex-bottom');

  })

  $('.on-top').hover(
    function() {
      $('.on-top .kami-peek-mask').addClass('hover-rotate');
      $('.kami-shadow').addClass('hover-opacity');
    },
    function() {
      $('.kami-peek-mask').removeClass('hover-rotate');
      $('.kami-shadow').removeClass('hover-opacity');
    }



  )

})
body {
  margin-top: 50px;
  margin-left: 50px;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
.origami {
  position: relative;
  display: block;
  width: 320px;
  height: 250px;
  text-align: center;
}
.kami-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10;
  perspective: 1240px;
  transition: z-index 0s 233.333ms;
}
.kami-wrapper.on-top {
  z-index: 20;
  transition: z-index 0s 233.333ms;
}
.kami-wrapper.on-top.click-zindex-bottom {
  z-index: 10;
}
.kami-wrapper.on-bottom.click-zindex-top {
  z-index: 20;
}
.kami-wrapper.on-top.click-zindex-top {
  z-index: 20;
}
.kami-wrapper.on-bottom.click-zindex-bottom {
  z-index: 10;
}
.kami-mask {
  position: absolute;
  width: 50%;
  top: 0;
  bottom: 0;
  overflow: hidden;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transform-origin: 100% 0px 0px;
  transform: rotateY(0deg);
  transition: -webkit-transform 350ms ease-out 233.333ms;
}
.kami-peek-mask {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 50%;
  width: 50%;
  overflow: hidden;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transform-origin: 0px 0px 0px;
  transition: -webkit-transform 350ms linear 0ms;
  transform: rotateY(0deg);
}
.on-top .kami-peek-mask.click-rotate {
  transform: rotateY(-90deg);
}
.on-top .kami-peek-mask.click-rotate-reverse {
  transition: -webkit-transform 0.5s linear 0ms;
  transform: rotateY(0deg);
}
.on-top .kami-peek-mask.hover-rotate {
  transform: rotateY(-30deg);
}
.kami-shadow {
  position: absolute;
  display: block;
  content: " ";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: black;
  margin: 0;
  width: 100%;
  height: 100%;
  transition: opacity 350ms linear;
  opacity: 0;
}
.kami-shadow.hover-opacity {
  opacity: 0.1;
}
.kami {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background-color: #f2f0eb;
}
.kami-peek-mask .kami {
  right: 0;
  left: auto;
}
span {
  display: block;
  margin: 50px auto 0;
}
.origami-content {
  color: white;
  background-color: #484745;
}
.origami-content p {
  margin: 0 12.5%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />

<body>

  <div class="origami">
    <div class="kami-wrapper on-top">


      <div class="kami-mask">
        <div class="kami">
          <span><i class="fa fa-envelope fa-4x"></i></span>
          <p><strong>More Sign-Ups</strong>
          </p>
        </div>
      </div>

      <div class="kami-peek-mask">
        <div class="kami kami-peek">
          <span><i class="fa fa-envelope fa-4x"></i></span>
          <p><strong>More Sign-Ups</strong>
          </p>
          <span class="kami-shadow"></span>
        </div>
      </div>




    </div>


    <div class="kami-wrapper on-bottom">

      <div class="kami-mask">
        <div class="kami origami-content">
          <span><i class="fa fa-envelope fa-2x"></i></span>
          <p><strong>More Sign-Ups</strong>
          </p>
          <p>Grow your email database by making it easy for your visitors to sign up on your site. A Flip Form or FlipJack can start your relationship off on the right foot.</p>
        </div>
      </div>

      <div class="kami-peek-mask">
        <div class="kami origami-content kami-peek">
          <span><i class="fa fa-envelope fa-2x"></i></span>
          <p><strong>More Sign-Ups</strong>
          </p>
          <p>Grow your email database by making it easy for your visitors to sign up on your site. A Flip Form or FlipJack can start your relationship off on the right foot.</p>
          <span class="kami-shadow" style="transition: opacity 350ms linear;"></span>
        </div>
      </div>

    </div>

  </div>


</body>

Upvotes: 1

Views: 425

Answers (0)

Related Questions