61,112
社区成员
发帖
与我相关
我的任务
分享
<html>
<head>
<meta charset="utf-8" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="formContainer">
<form id="login" method="post" action="./">
<input type="button" class="flipLink" value="rotate"/>
</form>
<form id="recover" method="post" action="./">
<input type="button" class="flipLink" value="rotate"/>
</form>
</div>
<!-- JavaScript includes -->
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
</body>
</html>
@CHARSET "UTF-8";
*{
margin:0;
padding:0;
}
html{
background:#161718;
}
body{
min-height: 600px;
padding: 20px 0 0;
font:14px/1.3 'Segoe UI',Arial, sans-serif;
}
#formContainer{
width:288px;
height:321px;
margin:0 auto;
position:relative;
z-index:1;
-moz-perspective: 800px;
-webkit-perspective: 800px;
perspective: 800px;
}
#formContainer form{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-transition:0.8s;
-webkit-transition:0.8s;
transition:0.8s;
-moz-animation: pulse 2s infinite;
-webkit-animation: pulse 2s infinite;
}
@-moz-keyframes pulse{
0%{ box-shadow:0 0 1px #008aff;}
50%{ box-shadow:0 0 8px #008aff;}
100%{ box-shadow:0 0 1px #008aff;}
}
@-webkit-keyframes pulse{
0%{ box-shadow:0 0 1px #008aff;}
50%{ box-shadow:0 0 10px #008aff;}
100%{ box-shadow:0 0 1px #008aff;}
}
#login{
background:#ffffff;
z-index:100;
}
#recover{
background:rgb(34, 167, 179);
z-index:1;
opacity:0;
-moz-transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
transform:rotateY(180deg);
}
#formContainer.flipped #login{
opacity:0;
-moz-transform:rotateY(-180deg);
-webkit-transform:rotateY(-180deg);
transform:rotateY(-180deg);
}
#formContainer.flipped #recover{
opacity:1;
-moz-transform:rotateY(0deg);
-webkit-transform:rotateY(0deg);
transform:rotateY(0deg);
}
/*----------------------------
Inputs, Buttons & Links
-----------------------------*/
#login .flipLink,
#recover .flipLink{
height: 25px;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
width: 65px;
}
#recover .flipLink{
right:auto;
left:0;
}
#login:after{
/* The "Click here" tooltip */
width:98px;
height:16px;
color:white;
content:"< Click";
position:absolute;
right:-120px;
top:3px;
}
$(function(){
$.support.css3d = supportsCSS3D();
var formContainer = $('#formContainer');
$('.flipLink').click(function(e){
formContainer.toggleClass('flipped');
if(!$.support.css3d){
$('#login').toggle();
}
e.preventDefault();
});
formContainer.find('form').submit(function(e){
e.preventDefault();
});
function supportsCSS3D() {
var props = [
'perspectiveProperty', 'WebkitPerspective', 'MozPerspective'
], testDom = document.createElement('a');
for(var i=0; i<props.length; i++){
if(props[i] in testDom.style){
return true;
}
}
return false;
}
});