css3 3D立方体

直接看代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>perspective</title>
    <style>
        html,
        body {
            height: 100%;
        }

        .contain {
            padding: 10px;
            position: relative;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            transform: translate(-50%, -50%);
            perspective: 500px;
            border: 1px solid greenyellow;
        }

        .contain .box {
            width: 200px;
            height: 200px;
            transform-style: preserve-3d;
            transform: translateZ(-100px);
            transition:transform 0.4s;
        }

        .contain .box div {
            position: absolute;
            width: 200px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            font-size: 20px;

        }

        .contain:hover .box {
            transform: translateZ(-100px) rotateX(-90deg) rotateY(-90deg)
        }

        .qian {
            background: rgba(40, 200, 100, 0.4);
            transform: translateZ( 100px) rou
        }

        .houmian {
            background: rgba(255, 35, 30, 0.5);
            transform: translateZ( -100px)
        }

        .top {
            background: rgba(255, 10, 230, 0.5);
            transform: rotateX(90deg) translateZ(100px)
        }

        .bottom {
            background: rgba(0, 10, 230, 0.5);
            transform: rotateX(90deg) translateZ(-100px)
        }

        .left {
            background: rgba(25, 100, 230, 0.5);
            transform: translateX(-100px) rotateY(-90deg)
        }

        .right {
            background: rgba(0, 10, 71, 0.5);
            transform: translateX( 100px) rotateY( 90deg)
        }
    </style>
</head>

<body>
    <div class="contain">
        <div class="box">
            <div class="qian">
                1
            </div>
            <div class="houmian">
                2
            </div>
            <div class="left">
                3
            </div>
            <div class="right">
                4
            </div>
            <div class="top">
                5
            </div>
            <div class="bottom">
                6
            </div>
        </div>


    </div>
</body>

</html>
猜你喜欢
