css实现带三维旋转切换的登录注册页代码

代码语言:html

所属分类:布局界面

代码描述:css实现带三维旋转切换的登录注册页代码

代码标签: 三维 旋转 切换 登录 册页

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body{
    	margin:0;
    	color:#6a6f8c;
    	background:#c8c8c8;
    	font:600 16px/18px 'Open Sans',sans-serif;
    }
    *,:after,:before{box-sizing:border-box}
    .clearfix:after,.clearfix:before{content:'';display:table}
    .clearfix:after{clear:both;display:block}
    a{color:inherit;text-decoration:none;}
    input, button {
      outline: none;
      border: none;
    }
    .login-wrap{
    	width:100%;
    	margin:auto;
    	max-width:525px;
    	min-height:670px;
    	position:relative;
    	background:url(//repo.bfw.wiki/bfwrepo/image/612f779822412.png) no-repeat center;
    	box-shadow:0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19);
    }
    .login-html{
    	width:100%;
    	height:100%;
    	position:absolute;
    	padding:90px 70px 50px 70px;
    	background:rgba(40,57,101,.9);
    }
    .login-html .sign-in-htm,
    .login-html .sign-up-htm{
    	top:0;
    	left:0;
    	right:0;
    	bottom:0;
    	position:absolute;
    	-webkit-transform:rotateY(180deg);
    	        transform:rotateY(180deg);
    	-webkit-backface-visibility:hidden;
    	        backface-visibility:hidden;
    	-webkit-t.........完整代码请登录后点击上方下载按钮下载查看

网友评论0