CSS（实现3d盒子旋转切换效果）笔记12

不修×蝙蝠

于 2024-08-29 15:49:54 发布

阅读量141

点赞数 7

文章标签： css 前端 html 动画笔记

本文链接：https://blog.csdn.net/m0_74977981/article/details/141680656

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <link rel="stylesheet" href="变形.css"> -->
    <title>Document</title>
    <style>
        /* label{
            display: block;
            width:100px;
            height:100px;
            background:yellow;
            border-radius: 100px;
            text-align: center;
            line-height: 100px;
            

        }
        label:hover{
            background: url(h.jpg);
        }
        */

        *{
            margin: 0;
            padding: 0;
        }

        body{
            height:100vh;
            display: flex;
            justify-content: center;
            align-items: center ;
        }

        input{
            display: none;
            /* 隐藏单选按钮 */
        }

        .c{
            /* background-color: aqua; */
            width:700px;
            height:350px;
            display: flex;
            align-items: center;
            justify-content: space-between;

        }

        .c .body{
            background: pink;
            width:500px;
            height:350px;
            position: relative;
            transform-style: preserve-3d;
            /* 施加3d效果 */
            transition: transform 1s ease;
            /* transform: rotateY(109deg) rotateX(33deg); */


        }

        .c .label{
            /* background: blueviolet; */
            width:150px;
            height:350px;

        }

        .c .label label{
            display: block;
            width:100px;
            height:100px;
            background:yellow;
            border-radius: 100px;
            margin-bottom: 25px;
            margin-left: 25px;
            text-align: center;
            line-height: 100px;
            cursor: pointer;
            color:aliceblue;
        }


        .c .label label:hover{
            opacity: 50%;
        }

        .c .label label:nth-child(1){
            background: aqua;

        }
        .c .label label:nth-child(2){
            background: aquamarine;
        }
        .c .label label:nth-child(3){
            background: rgb(15, 171, 119);
        }

        .c .body .content{
            width:100%;
            height:100%;
            display: flex;
            flex-direction:column ;
            justify-content: center;
            align-items: center;
            color: aliceblue;
            position: absolute;


        }

        .c .body .content:nth-child(1){
            background: aqua;
            transform:translateY(-175px) rotateX(90deg);
            

        }
        .c .body .content:nth-child(2){
            background: aquamarine;
            transform: translateZ(176px);
            

        }
        .c .body .content:nth-child(3){
            background: rgb(15, 171, 119);
            transform: translateY(175px) rotateX(-90deg);

        }

        #t1:checked~.body{
            transform: rotateX(-90deg);
        }
        #t2:checked~.body{
            transform: rotateX(0deg);
        }
        #t3:checked~.body{
            transform: rotateX(90deg);
        }






    </style>
</head>
<body>
    <!-- <input type="radio" name="aa"  id="1">
    <input type="radio" name="aa"  id="2">
    <input type="radio" name="aa"  id="3">
    <label for="1">1</label>
    <label for="2">2</label>
    <label for="3">3</label>
    增大触发点 -->


    <div class="c">
        <input type="radio" name="aa"  id="t1" checked>
        <input type="radio" name="aa"  id="t2">
        <input type="radio" name="aa"  id="t3">


        <div class="body">
            <div class="content">
                <h3>TOP</h3>
            </div>
            <div class="content">
                <h3>MIDDLE</h3>
            </div>
            <div class="content">
                <h3>BOTTOM</h3>
            </div>
        </div>

        <div class="label">
            <label for="t1">ONE</label>
            <label for="t2">TWO</label>
            <label for="t3">THREE</label>
        </div>



    </div>

   
  

</body>
</html>

得到：