<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="https://s.codepen.io/assets/libs/prefixfree.min.js"></script> <script src="https://code.jquery.com/jquery-latest.js"></script> <p class="alert"> </p> <div class=".perspective" onclick="openDoor(this)"> <div class=".thumb"> </div> </div> <div class=".perspective" onclick="openDoor(this)"> <div class=".thumb"> </div> </div> <div class=."perspective" onclick="openDoor(this)"> <div class=".thumb"> </div> </div> <div class=".perspective" onclick="openDoor(this)"> <div class=".thumb"> </div> </div>

body { background-color:#f0f0f0; } .container { margin:0 auto; width:90%; } .perspective { background: url("http://dc428.4shared.com/img/QWu4ziBq/s3/doorBorder.png"); background-repeat: no-repeat; background-position: center center; position: relative; display: inline; float: left; height: 274px; width: 147px; margin: 20px; margin-left: 0px; -webkit-perspective: 450; border-radius: 3px; box-sizing: border-box; } .thumb { background: url("http://dc428.4shared.com/img/-vayshJ-/s3/ClassDoor.png"); background-repeat: no-repeat; background-position: center center; width: 147px; height: 274px; position: absolute; box-sizing: border-box; border-radius: 3px; box-shadow: 0 0 0 10px rgba(255, 255, 255, .0) inset; transition: 1s transform linear; transform-origin: left; cursor: pointer; } .thumbOpened { transform: rotateY(-90deg); transform-origin: 8px; transition: .5s linear; } .alert { padding: 8px 35px 8px 14px; margin-bottom: 20px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); background-color: #fcf8e3; border: 1px solid #fbeed5; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; color: #000; transform-origin: left; transform:rotateY(180deg); opacity:0; animation-name: go; animation-duration: 0.5s; animation-timing-function: ease-in-out; animation-fill-mode: forwards; animation-delay: 0.5s; width:350px; } @keyframes go { 100%{ opacity:1; transform:rotateY(0deg); } }

function openDoor(field) { var y = $(field).find(".thumb"); var x = y.attr("class"); if (y.hasClass("thumbOpened")) { y.removeClass("thumbOpened"); } else { $(".thumb").removeClass("thumbOpened"); y.addClass("thumbOpened"); } }