<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="box1">
<h2>Sign In</h2>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<br>
If you have no account create account:
<button class="btn btn-danger mybtn pull-right">register</button>
</div>
<div class="box2">
<h2>Sign Up</h2>
<form>
<div class="form-group">
<label for="exampleInputName">Name</label>
<input type="text" class="form-control" id="exampleInputName" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputEmail">Email</label>
<input type="email" class="form-control" id="exampleInputEmail" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputPassword3">Confirm Password</label>
<input type="password" class="form-control" id="exampleInputPassword3" placeholder="Confirm Password">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<br>
If you allready have an account Sign in:
<button class="btn btn-danger mybtn pull-right">sign in</button>
</div>
<div class="line"></div>
</div>
.container {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%,-50%);
/*margin: 100px auto;*/
perspective: 1000px;
}
.box1, .box2 , .container {
box-sizing: border-box;
width: 400px;
height: 500px;
transition: all 0.5s 0.2s ease;
border-radius: 5px;
}
.box1{
padding: 30px;
position: absolute;
top: 0;
left: 0;
color: yellow;
text-shadow: 1px 1px rgba(0,0,0,0.5);
/*background-color: green;*/
backface-visibility: hidden;
z-index: 50;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0a77d5+35,0a77d5+63,539fe1+79,87bcea+96 */
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0a77d5+4,0a77d5+36,539fe1+66,87bcea+96 */
background: #0a77d5; /* Old browsers */
background: -moz-linear-gradient(45deg, #0a77d5 4%, #0a77d5 36%, #539fe1 66%, #87bcea 96%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg, #0a77d5 4%,#0a77d5 36%,#539fe1 66%,#87bcea 96%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, #0a77d5 4%,#0a77d5 36%,#539fe1 66%,#87bcea 96%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a77d5', endColorstr='#87bcea',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.box2{
position: absolute;
padding: 30px;
top: 0;
left: 0;
color: blue;
/*background-color: yellow;*/
/*visibility: hidden;*/
backface-visibility: hidden;
z-index: 1;
transform: rotateY(180deg);
text-shadow: 1px 1px rgba(53,198,73,0.7);
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b7df2d+1,e3f5ab+61,f8ffe8+100 */
background: #b7df2d; /* Old browsers */
background: -moz-linear-gradient(45deg, #b7df2d 1%, #e3f5ab 61%, #f8ffe8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg, #b7df2d 1%,#e3f5ab 61%,#f8ffe8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, #b7df2d 1%,#e3f5ab 61%,#f8ffe8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7df2d', endColorstr='#f8ffe8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.line{
position: absolute;
bottom: -20px;
left: 0;
width: 100%;
height: 2px;
background-color: rgba(0,0,0,1);
border-radius: 1px;
filter:blur(5px);
transition: all 0.55s 0.2s ease;
}
.box{
transform: rotateY(540deg);
}
.box:nth-child(2){
transform: rotateY(720deg);
}
$('document').ready(function(){
$('.mybtn').click(function(){
$('.container> div').toggleClass("box");
});
$(document).on("contextmenu",function(){
return false;
});
})
