Seokky
9/20/2017 - 9:52 PM

3d-transform with JQuery

3d-transform with JQuery

index.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    
    .wrap {
      position: relative;
      width: 300px;
      height: 300px;
      -webkit-perspective: 2000px;
      -webkit-perspective-origin: 50% 50%;
      transition: all 1s ease-in-out;
      -webkit-transform-style: preserve-3d;
      -webkit-transform: rotateY(0deg);
      margin-bottom: 20px;
    }

    .front,
    .back {
      position: absolute;
      width: 100%;
      height: 100%;
      background: #ccc;
      -webkit-backface-visibility: hidden;
    }

    .back {
      -webkit-transform: rotateY(180deg);
    }    
    </style>
</head>
<body>
    <div class="wrap">
        <div class="panel">
            <div class="front"><img src="//placehold.it/300x300&text=Front"></div>
            <div class="back"><img src="//placehold.it/300x300&text=Back"></div>
        </div>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
    $(function() {
        $('img').click(function() {
            var wrap = $('.wrap');
            if($(wrap).css('-webkit-transform') == 'matrix(1, 0, 0, 1, 0, 0)') {
                $(wrap).css({'-webkit-transform':'rotateY(180deg)'});
            } else {
                $(wrap).css({'-webkit-transform':'rotateY(0deg)'});
            }
  });
});
    </script>
</body>
</html>