master

分支 (1)

管理

管理

master

static-css-animation-style
/
案例库.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D元素</title>
    <style>
        *{
            margin:0;
            padding:0;
        }

        html{
            height:100%;

            /* 背景色渐变属性 线性渐变 */
            background:linear-gradient(#ff0 0%, #000 80%);
        }

        body{
            text-align: center;
            padding-top:7em;
        }

        input{
            display: none;
        }

        label{
            display: inline-block;

            width:5em;
            height:3em;
            line-height:3em;
            text-align: center;
            border:1px solid #666;
            cursor: pointer;
            border-radius: 5px;
            margin-right:2em;

            transition:all linear .3s;
        }

        label:last-child{
            margin-right:0;
        }

        label:hover{
            transform:translateY(-10px);
            box-shadow: 0px 10px 20px 0px rgb(156, 154, 154);
            background-color:aqua;
        }


        .clear{
            height:10em;
        }


        /* 3D空间 */
        .views{
            width:250px;
            height:250px;
            /* border:1px solid red; */
            margin:0 auto;

            position: relative;

            /* 设置3D效果的距离 近大远小 */
            perspective: 1000px;
        }

        /* 3D的立体元素 */
        .box{
            width:100%;
            height:100%;

            /* 将元素以3D的效果显示 */
            transform-style: preserve-3d;

            /* 稍微的转换一下角度，看到不同的层面 */
            transform:rotateX(-15deg) rotateY(20deg);

            transition:all ease-in-out .3s;
        }

        /* 6个面 */
        .face{
            width:100%;
            height:100%;
            line-height:250px;
            font-size:2em;
            font-weight: bold;
            text-align: center;
            background-color:rgba(51, 51, 51, .1);
            border:1px solid #fff;
            position: absolute;
            left:0;
            top:0;
            box-shadow: 0px 0px 20px 0px #333;
            color:#fff;
            opacity: .6;
            transition:all ease-in-out .3s;
        }


        .front{
            transform:translate3d(0px, 0px, 125px);
        }

        .back{
            transform:rotateY(180deg) translate3d(0px, 0px, 125px);
        }

        .left{
            transform:rotateY(-90deg) translate3d(0px, 0px, 125px);
        }

        .right{
            transform:rotateY(90deg) translate3d(0px, 0px, 125px);
        }

        .top{
            transform:rotateX(90deg) translate3d(0px, 0px, 125px);
        }

        .bottom{
            transform:rotateX(-90deg) translate3d(0px, 0px, 125px);
        }


        input:checked + label{
            transform:translateY(-10px);
            box-shadow: 0px 10px 20px 0px rgb(156, 154, 154);
            background-color:aqua;
        }

        #front:checked ~ .views .box{
            transform:rotateX(-15deg) rotateY(20deg);
        }

        #back:checked ~ .views .box{
            transform:rotateX(-15deg) rotateY(200deg);
        }

        #left:checked ~ .views .box{
            transform:rotateX(-15deg) rotateY(110deg);
        }

        #right:checked ~ .views .box{
            transform:rotateX(-15deg) rotateY(-70deg);
        }

        #top:checked ~ .views .box{
            transform:rotateY(20deg) rotateX(-90deg);
        }

        #bottom:checked ~ .views .box{
            transform:rotateY(20deg) rotateX(90deg);
        }

        #big:checked ~ .views .box{
            transform:scale(2) rotateX(-15deg) rotateY(20deg);
        }

        #small:checked ~ .views .box{
            transform:scale(.5) rotateX(-15deg) rotateY(20deg);
        }

        #rotate:checked ~ .views .box{
            animation:rotate linear 6s infinite;
        }

        @keyframes rotate{
            0%{
                transform:rotateX(0deg) rotateY(0deg);
            }
            100%{
                transform:rotateX(360deg) rotateY(360deg);
            }
        }


        /* 展开 */
        #open:checked ~ .views .box .front{
            transform:translate3d(0px, 0px, 300px);
        }

        #open:checked ~ .views .box .back{
            transform:rotateY(180deg) translate3d(0px, 0px, 300px);
        }

        #open:checked ~ .views .box .left{
            transform:rotateY(-90deg) translate3d(0px, 0px, 300px);
        }

        #open:checked ~ .views .box .right{
            transform:rotateY(90deg) translate3d(0px, 0px, 300px);
        }

        #open:checked ~ .views .box .top{
            transform:rotateX(90deg) translate3d(0px, 0px, 300px);
        }

        #open:checked ~ .views .box .bottom{
            transform:rotateX(-90deg) translate3d(0px, 0px, 300px);
}


    </style>
</head>
<body>
    <input type="radio" name="box" id="front" checked />
    <label for="front">正面</label>

    <input type="radio" name="box" id="back" />
    <label for="back">背面</label>

    <input type="radio" name="box" id="left" />
    <label for="left">左边</label>

    <input type="radio" name="box" id="right" />
    <label for="right">右边</label>

    <input type="radio" name="box" id="top" />
    <label for="top">上面</label>

    <input type="radio" name="box" id="bottom" />
    <label for="bottom">下面</label>

    <input type="radio" name="box" id="big" />
    <label for="big">放大</label>

    <input type="radio" name="box" id="small" />
    <label for="small">缩小</label>

    <input type="radio" name="box" id="rotate" />
    <label for="rotate">旋转</label>

    <input type="radio" name="box" id="open" />
    <label for="open">展开</label>

    <div class="clear"></div>

    <!-- 3D空间 -->
    <div class="views">
        <!-- 3D元素 -->
        <div class="box">
            <div class="face front">正面</div>
            <div class="face back">背面</div>
            <div class="face left">左面</div>
            <div class="face right">右面</div>
            <div class="face top">上面</div>
            <div class="face bottom">下面</div>
        </div>
    </div>
</body>
</html>