前端初体验——css动画变形练习3：旋转盒子

Ttang23

于 2024-08-29 20:02:15 发布

阅读量21

点赞数

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/2301_78566776/article/details/141680511

版权

本练习最终效果如下视频：

旋转盒子

涉及新增知识点有：

input 与 lable input格式单一无法更改，可以用label来代替input，这样可以通过更改label的样式来表示input标签

<input type="radio" name="aa" id="item1">
<input type="radio" name="aa" id="item2">
<input type="radio" name="aa" id="item3">
<label for="item1">top</label>
<label for="item2">middle</label>
<label for="item3">bottom</label>

同时对input 标签进行隐

 input{
            display: none;
        }

点击label 触发.tab_body中的动画

#item1:checked~.tab_body{
            transform:rotateX(-90deg);
        }
#item2:checked~ .tab_body{
            transform:rotateX(0deg);
        }
#item3:checked~ .tab_body{
            transform:rotateX(90deg);
        }

本练习代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        

        .container{
            width: 700px;
            height: 350px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            perspective: 1300px;


        }

        input{
            display: none;
        }

        .container .tab_body{
            width: 500px;
            height: 300px;
            background: aquamarine;
            position: relative;
            transform-style:preserve-3d ;

            transition: transform 0.5s linear;
            /* transform:rotateY(58deg) rotateX(-45deg); */
        }

        .container .labels{
            width: 150px;
            height: 350px;

        }

        .container .labels label{
            background: rgb(236, 153, 236);
            display: block;
            width:150px;
            height:100px;
            margin-bottom: 25px;
            text-align: center;
            line-height: 100px;
            color: #ffffff;
            
        }
        .container .labels label:hover{
            opacity: 0.7;
        }


        .container .labels label:nth-child(2){
            background: rgb(226, 194, 99);
        }
        .container .labels label:nth-child(3){
            background: rgb(120, 215, 237);
        }

        .container .tab_body .tab_content{
            width: 100%;
            height: 100%;
            background: rgb(236, 153, 236);
            display: flex;

            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: absolute;

            color: #ffffff;
        }
        .container .tab_body .tab_content:nth-child(1){
            transform: translateZ(25px) translateY(-150px) rotateX(90deg) ;
        }

        .container .tab_body .tab_content:nth-child(2){
            background: rgb(226, 194, 99);
            transform: translateZ(175px);
        }
        .container .tab_body .tab_content:nth-child(3){
            background:rgb(120, 215, 237);
            transform: translateZ(25px) translateY(150px) rotateX(-90deg)
        }

        #item1:checked~.tab_body{
            transform:rotateX(-90deg);
        }
        #item2:checked~ .tab_body{
            transform:rotateX(0deg);
        }
        #item3:checked~ .tab_body{
            transform:rotateX(90deg);
        }

    </style>
</head>
<body>

    <div class="container">
        <input type="radio" name="aa" id="item1">
        <input type="radio" name="aa" id="item2">
        <input type="radio" name="aa" id="item3">

        <div class="tab_body">

            <div class="tab_content">
                <h3>top content</h3>
                <p>this is the content</p>
            </div>



            <div class="tab_content">
                <h3>middle content</h3>
                <p>this is the content</p>
            </div>



            <div class="tab_content">
                <h3>bottom content</h3>
                <p>this is the content</p>
            </div> 

        </div>
            

        <div class="labels">
            <label for="item1">top</label>
            <label for="item2">middle</label>
            <label for="item3">bottom</label>

        </div>


    </div>

</body>
</html>