3D翻转Tab选项卡切换案例练习
!--html部分--htmlheadmetacharset="UTF-8"/title3D翻转Tab选项卡切换/titlelinkrel="stylesheet"href="css/css4.css"//headbodydivclass="perspective"labelfor="tab_top"class="tab"上/labellabelfor="tab_front"class="tab"中/labellabelfor="tab_bottom"class="tab"下/labelinputtype="radio"name="tabs"id="tab_top"inputtype="radio"name="tabs"id="tab_front"inputtype="radio"name="tabs"id="tab_bottom"divclass="cube"divclass="tab-content"h1上边内容/h1p这是内容/p/divdivclass="tab-content"h1中间内容/h1p这是内容/p/divdivclass="tab-content"h1下边内容/h1p这是内容/p/div/div/div/body/html!--css部分css4文件--body{background:#fff;}.perspective{perspective:76em;perspective-origin:50%50px;width:px;margin:0auto;font-weight:;color:#fff;text-align:center;}input{display:none;}.tab{position:absolute;width:80px;height:70px;background:pink;right:0;line-height:70px;font-weight:;}.tab:nth-child(1){top:-5px;background:#e83d3d;}.tab:nth-child(2){top:69px;background:#65c51b;}.tab:nth-child(3){top:px;background:#3d53bf;}.cube{position:relative;margin:60pxauto;width:px;height:px;transform-origin:0px;transform-style:preserve-3d;transition:transform0.5sease-in;}.tab-content{width:px;height:px;position:absolute;}.tab-contenth1{font-size:25px;margin:75pxpx;font-weight:;}.tab-contentp{font-size:12px;}.tab-content:nth-child(2){transform:translateZ(px);background:#65c51b;}.tab-content:nth-child(1){transform:rotateX(-deg)translateY(-px);transform-origin:topleft;background:#e83d3d;}.tab-content:nth-child(3){transform:rotateX(-90deg)translateY(px);transform-origin:bottomcenter;background:#3d53bf;}#tab_top:checked~.cube{transform:rotateX(-90deg);}#tab_front:checked~.cube{transform:rotateX(0deg);}#tab_bottom:checked~.cube{transform:rotateX(90deg);}
每日学习一点点，进步一点点
—END—扫码