首页 建站教程 WEB前端 正文

纯CSS3实现3D切换选项卡

Tab选项卡是大家最常用的功能之一,因为兼容性的问题目前大多朋友也都是用js书写,当然我也会用JS去书写,必定web端的应用你的用户群体是不不同的,兼容性自然是很重要的。不过今天我们介绍的是用纯css的方式来写一个选项卡的功能,这里用到的css3的主要属性及伪类有transform transform: rotate transform: transla...

Tab选项卡是大家最常用的功能之一,因为兼容性的问题目前大多朋友也都是用js书写,当然我也会用JS去书写,必定web端的应用你的用户群体是不不同的,兼容性自然是很重要的。

纯CSS3实现3D切换选项卡 3d旋转 3d切换 纯css选项卡 Tabs选项卡 图1

不过今天我们介绍的是用纯css的方式来写一个选项卡的功能,这里用到的css3的主要属性及伪类有

transform
transform: rotate
transform: translate
transform-origin
transform-style
transition
:nth-child
:checked

以上属性及伪类选择器均不支持IE8及以下浏览器,大家酌情使用

其中:checked是主要功臣

定义

:checked 选择器匹配每个选中的输入元素(仅适用于单选按钮或复选框)。

兼容性

纯CSS3实现3D切换选项卡 3d旋转 3d切换 纯css选项卡 Tabs选项卡 图2

我们贴出具体实现的代码:

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>纯css3实现3d切换选项卡</title> 
        <style> 
            body { 
                background: #282828; 
            } 
 
            .perspective { 
                perspective: 76em; 
                perspective-origin: 50% 50px; 
                width: 494px; 
                margin: 0 auto; 
                font-weight: 100; 
                color: #fff; 
                text-align: center; 
            } 
 
            input { 
                display: none; 
            } 
 
            .tab { 
                position: absolute; 
                width: 80px; 
                height: 70px; 
                background: pink; 
                right: 0; 
                line-height: 70px; 
                font-weight: 300; 
            } 
 
            .tab:nth-child(1) { 
                top: -5px; 
                background: #33CCFF; 
            } 
 
            .tab:nth-child(2) { 
                top: 69px; 
                background: #1B9AAA; 
            } 
 
            .tab:nth-child(3) { 
                top: 143px; 
                background: #669999; 
            } 
 
            .cube { 
                position: relative; 
                margin: 60px auto 0; 
                width: 300px; 
                height: 200px; 
                transform-origin: 0 100px; 
                transform-style: preserve-3d; 
                transition: transform 0.5s ease-in; 
            } 
 
            .tab-content { 
                width: 300px; 
                height: 200px; 
                position: absolute; 
            } 
 
            .tab-content h1 { 
                font-size: 25px; 
                margin: 75px 0 10px; 
                font-weight: 300; 
            } 
 
            .tab-content p { 
                font-size: 12px; 
            } 
 
            .tab-content:nth-child(2) { 
                transform: translateZ(100px); 
                background: #1B9AAA; 
            } 
 
            .tab-content:nth-child(1) { 
                transform: rotateX(-270deg) translateY(-100px); 
                transform-origin: top left; 
                background: #33CCFF; 
            } 
 
            .tab-content:nth-child(3) { 
                transform: rotateX(-90deg) translateY(100px); 
                transform-origin: bottom center; 
                background: #669999; 
            } 
 
            #tab-one:checked~.cube { 
                transform: rotateX(-90deg); 
            } 
 
            #tab-two:checked~.cube { 
                transform: rotateX(0deg); 
            } 
 
            #tab-three:checked~.cube { 
                transform: rotateX(90deg); 
            } 
        </style> 
    </head> 
    <body> 
        <div class="perspective"> 
 
            <label class="tab" for="tab-one">选项卡一</label> 
            <label class="tab" for="tab-two">选项卡二</label> 
            <label class="tab" for="tab-three">选项卡三</label> 
            <input type="radio" name="tabs" id="tab-one"> 
            <input type="radio" name="tabs" id="tab-two"> 
            <input type="radio" name="tabs" id="tab-three"> 
 
            <div class="cube"> 
                <div class="tab-content"> 
                    <h1>第一个选项卡内容</h1> 
                </div> 
                <div class="tab-content"> 
                    <h1>第二个选项卡内容</h1> 
                </div> 
                <div class="tab-content"> 
                    <h1>第三个选项卡内容</h1> 
                </div> 
            </div> 
        </div> 
 
    </body> 
</html>

附上tranform和transition的语法及参数用法

语法

transform: none|transform-functions;

描述
none定义不进行转换。
matrix(n,n,n,n,n,n)定义 2D 转换,使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定义 3D 转换,使用 16 个值的 4×4 矩阵。
translate(x,y)定义 2D 转换。
translate3d(x,y,z)定义 3D 转换。
translateX(x)定义转换,只是用 X 轴的值。
translateY(y)定义转换,只是用 Y 轴的值。
translateZ(z)定义 3D 转换,只是用 Z 轴的值。
scale(x[,y]?)定义 2D 缩放转换。
scale3d(x,y,z)定义 3D 缩放转换。
scaleX(x)通过设置 X 轴的值来定义缩放转换。
scaleY(y)通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)定义 2D 旋转,在参数中规定角度。
rotate3d(x,y,z,angle)定义 3D 旋转。
rotateX(angle)定义沿着 X 轴的 3D 旋转。
rotateY(angle)定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)为 3D 转换元素定义透视视图。

语法

transition: property duration timing-function delay;

描述
transition-property指定CSS属性的name,transition效果
transition-durationtransition效果需要指定多少秒或毫秒才能完成
transition-timing-function指定transition效果的转速曲线
transition-delay定义transition效果开始的时候

演示效果

此处为隐藏内容,请评论后查看隐藏内容,谢谢!

打赏
海报

声明:本站部分资源内容为站内原创著作,也有部分基于互联网公开分享整理,版权归原作者所有。
如侵犯到您的权益,请联系本站,我们会尽快处理,谢谢。转摘请注明出处

本文链接:https://www.umtheme.com/web/205.html

相关推荐

纯css实现菜单或列表循环向上滚动效果

纯css实现菜单或列表循环向上滚动效果

在前端开发过程中,有时候针对某个模块需要无限循环的滚动一些消息或菜单,我们常用的方法基本上都是通过js来实现,虽然代码相对来说可能会精简一些,但是对于JS不是很熟悉的同学来说还是不太好理解,毕竟相对于...
WEB前端 2022.08.17 0 184
纯CSS3实现3D切换选项卡

纯CSS3实现3D切换选项卡

Tab选项卡是大家最常用的功能之一,因为兼容性的问题目前大多朋友也都是用js书写,当然我也会用JS去书写,必定web端的应用你的用户群体...
WEB前端 2022.08.16 0 298
发布评论

ainiaobaibaibaibaobaobeishangbishibizuichiguachijingchongjingdahaqiandaliandangaodw_dogedw_erhadw_miaodw_tuzidw_xiongmaodw_zhutouganbeigeiliguiguolaiguzhanghahahahashoushihaixiuhanheixianhenghorse2huaixiaohuatonghuaxinhufenjiayoujiyankeaikeliankouzhaokukuloukunkuxiaolandelinileimuliwulxhainiolxhlikelxhqiuguanzhulxhtouxiaolxhwahahalxhzanningwennonuokpinganqianqiaoqinqinquantouruoshayanshengbingshiwangshuaishuijiaosikaostar0star2star3taikaixintanshoutianpingtouxiaotuwabiweifengweiquweiwuweixiaowenhaowoshouwuxiangjixianhuaxiaoerbuyuxiaokuxiaoxinxinxinxinsuixixixuyeyinxianyinyueyouhenghengyuebingyueliangyunzanzhajizhongguozanzhoumazhuakuangzuohenghengzuoyi
感谢您的支持