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

代码语言：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-transition:all .4s linear;
    	        transition:all .4s linear;
    }
    .login-html .sign-in,
    .login-html .sign-up,
    .login-form .group .check{
    	display:none;
    }
    .login-html .tab,
    .login-form .group .label,
    .login-form .group .button{
    	text-transform:uppercase;
    }
    .login-html .tab{
    	font-size:22px;
    	margin-right:15px;
    	padding-bottom:5px;
    	margin:0 15px 10px 0;
    	display:inline-block;
    	border-bottom:2px solid transparent;
    }
    .login-html .sign-in:checked + .tab,
    .login-html .sign-up:checked + .tab{
    	color:#fff;
    	border-color:#1161ee;
    }
    .login-form{
    	min-height:345px;
    	position:relative;
    	-webkit-perspective:1000px;
    	        perspective:1000px;
    	-webkit-transform-style:preserve-3d;
    	        transform-style:preserve-3d;
    }
    .login-form .group{
    	margin-bottom:15px;
    }
    .login-form .group .label,
    .login-form .group .input,
    .login-form .group .button{
    	width:100%;
    	color:#fff;
    	display:block;
    }
    .login-form .group .input,
    .login-form .group .button{
    	border:none;
    	padding:15px 20px;
    	border-radius:25px;
    	background:rgba(255,255,255,.1);
    }
    .login-form .group input[data-type="password"]{
    	text-security:circle;
    	-webkit-text-security:circle;
    }
    .login-form .group .label{
    	color:#aaa;
    	font-size:12px;
    }
    .login-form .group .button{
    	background:#1161ee;
    }
    .login-form .group label .icon{
    	width:15px;
    	height:15px;
    	border-radius:2px;
    	position:relative;
    	display:inline-block;
    	background:rgba(255,255,255,.1);
    }
    .login-form .group label .icon:before,
    .login-form .group label .icon:after{
    	content:'';
    	width:10px;
    	height:2px;
    	background:#fff;
    	position:absolute;
    	-webkit-transition:all .2s ease-in-out 0s;
    	        transition:all .2s ease-in-out 0s;
    }
    .login-form .group label .icon:before{
    	left:3px;
    	width:5px;
    	bottom:6px;
    	-webkit-transform:scale(0) rotate(0);
    	    -ms-transform:scale(0) rotate(0);
    	        transform:scale(0) rotate(0);
    }
    .login-form .group label .icon:after{
    	top:6px;
    	right:0;
    	-webkit-transform:scale(0) rotate(0);
    	    -ms-transform:scale(0) rotate(0);
    	        transform:scale(0) rotate(0);
    }
    .login-form .group .check:checked + label{
    	color:#fff;
    }
    .login-form .group .check:checked + label .icon{
    	background:#1161ee;
    }
    .login-form .group .check:checked + label .icon:before{
    	-webkit-transform:scale(1) rotate(45deg);
    	    -ms-transform:scale(1) rotate(45deg);
    	        transform:scale(1) rotate(45deg);
    }
    .login-form .group .check:checked + label .icon:after{
    	-webkit-transform:scale(1) rotate(-45deg);
    	    -ms-transform:scale(1) rotate(-45deg);
    	        transform:scale(1) rotate(-45deg.........完整代码请登录后点击上方下载按钮下载查看