【原理】用纯css3实现切换（3d转换），可以用在登录&注册页面上

如图所示





html

<div class="qie">
<input type="radio" class="check1" name="tab" id="tab1" checked><label for="tab1" class="tab">tab1</label>
<input type="radio" class="check2" name="tab" id="tab2"><label for="tab2" class="tab">tab2</label>
<div class="form">
<div class="forma">
forma
</div>
<div class="formb">
formb
</div>
</div>
</div>
css

<style scoped>
/*.qie{*/
/*width:500px;*/
/*margin:0 auto;*/
/*}*/
/*.forma{*/
/*background: antiquewhite;*/
/*}*/
/*.formb{*/
/*background: aqua;*/
/*}*/

/*关键代码*/
.forma,
.formb{
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;
}

.check1:checked + .tab + .check2 + .tab + .form .forma{
-webkit-transform:rotate(0);
-ms-transform:rotate(0);
transform:rotate(0);
}
.check2:checked + .tab + .form .formb{
-webkit-transform:rotate(0);
-ms-transform:rotate(0);
transform:rotate(0);
}
</style>

比如可以这样用：





将forma和formb替换掉即可。