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

来源：互联网发布：xtream path mac 编辑：程序博客网时间：2024/05/18 01:07

如图所示

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替换掉即可。

阅读全文

0 0