点击实现盒子翻转切换

最新推荐文章于 2023-11-13 22:15:02 发布

我真的不会敲呀

最新推荐文章于 2023-11-13 22:15:02 发布

阅读量920

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/qq_68446882/article/details/128064097

版权

1.首先我们来看一下盒子翻转的效果

2.实现这个要用到css，和css3中的ladel属性即可

首先是做两个div 一个div里面放大的盒子，也就是翻转的那个盒子，另一个div放右边点击切换的小方块，然后将他们放到主体的div盒子之中。

下面就是总体布局的代码了（全部代码在最下文）

    <div class="container">
        <input type="radio" name="tabs" id="tab_top" checked>
        <input type="radio" name="tabs" id="tab_middle">
        <input type="radio" name="tabs" id="tab_bottom">
        <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 class="labels">
            <label for="tab_top" class="tab">第一块</label>
            <label for="tab_middle" class="tab">第二块</label>
            <label for="tab_bottom" class="tab">第三块</label>
        </div>
    </div>

3.然后给其增加上css样式就可以了

即在点击时转换一个样式，将大盒子与右边的切换设为一个颜色

1.先设置基本的属性、背景设置好把input隐藏

*{
    margin: 0;
    padding: 0;
}
body{
    height: 100vh;
    background: linear-gradient(to top,#29323c,#485563);
}
input{
    display: none;
}

2.设置主体的div的样式

.container{
    width: 500px;
    display: flex;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-45%,-50%);
    color: #fff;
    font-weight: 300;
    /* 设置视距 */
    perspective: 1300px;
}

3.设置切换盒子的样式

.labels{
    height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.tab{
    width: 100px;
    height: 80px;
    line-height: 80px;
    text-align: center;
}
.tab:nth-child(1){
    background-color: #e0e2e2;
}
.tab:nth-child(2){
    background-color: #b1b4b5;
}
.tab:nth-child(3){
    background-color: #c4d5db;
}

4.设置左边需要切换盒子的样式和增加特效

.cube{
    position: relative;
    flex: 1;
    /* 开启3D */
    transform-style: preserve-3d;
    /* 设置过渡效果 */
    transition: transform 0.5s ease-in;
}
.tab-content{
    width: 95%;
    height: 230px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: red;
}
.tab-content h1{
    font-size: 28px;
    font-weight: 300;
}

效果

.tab-content:nth-child(1){
    background-color: #e0e2e2;
    transform: rotateX(-270deg) translateY(-115px);
    transform-origin: top center;
}
.tab-content:nth-child(2){
    background-color: #b1b4b5;
    transform: translateZ(115px);
}
.tab-content:nth-child(3){
    background-color: #c4d5db;
    transform: rotateX(-90deg) translateY(115px);
    transform-origin: bottom center;
}
#tab_top:checked ~ .cube{
    transform: rotateX(-90deg);
}
#tab_middle:checked ~ .cube{
    transform: rotateX(0deg) translateY(10px);
}
#tab_bottom:checked ~ .cube{
    transform: rotateX(90deg);
}

然后其效果也就实现了

全部代码

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>选项卡切换特效</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            height: 100vh;
            background: linear-gradient(to top, #29323c, #485563);
        }

        .container {
            width: 500px;
            display: flex;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-45%, -50%);
            color: #fff;
            font-weight: 300;
            /* 设置视距 */
            perspective: 1300px;
        }

        input {
            display: none;
        }

        .labels {
            height: 250px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .tab {
            width: 100px;
            height: 80px;
            line-height: 80px;
            text-align: center;
        }

        .tab:nth-child(1) {
            background-color: #e0e2e2;
        }

        .tab:nth-child(2) {
            background-color: #b1b4b5;
        }

        .tab:nth-child(3) {
            background-color: #c4d5db;
        }

        .cube {
            position: relative;
            flex: 1;
            /* 开启3D */
            transform-style: preserve-3d;
            /* 设置过渡效果 */
            transition: transform 0.5s ease-in;
        }

        .tab-content {
            width: 95%;
            height: 230px;
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            background-color: red;
        }

        .tab-content h1 {
            font-size: 28px;
            font-weight: 300;
        }

        .tab-content:nth-child(1) {
            background-color: #e0e2e2;
            transform: rotateX(-270deg) translateY(-115px);
            transform-origin: top center;
        }

        .tab-content:nth-child(2) {
            background-color: #b1b4b5;
            transform: translateZ(115px);
        }

        .tab-content:nth-child(3) {
            background-color: #c4d5db;
            transform: rotateX(-90deg) translateY(115px);
            transform-origin: bottom center;
        }

        #tab_top:checked~.cube {
            transform: rotateX(-90deg);
        }

        #tab_middle:checked~.cube {
            transform: rotateX(0deg) translateY(10px);
        }

        #tab_bottom:checked~.cube {
            transform: rotateX(90deg);
        }
    </style>
</head>

<body>
    <div class="container">
        <input type="radio" name="tabs" id="tab_top" checked>
        <input type="radio" name="tabs" id="tab_middle">
        <input type="radio" name="tabs" id="tab_bottom">
        <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 class="labels">
            <label for="tab_top" class="tab">第一块</label>
            <label for="tab_middle" class="tab">第二块</label>
            <label for="tab_bottom" class="tab">第三块</label>
        </div>
    </div>
</body>

</html>