3D立体盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width= , initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #1abc9c;
        }
        body:hover main{
            _transform: perspective(900px) rotateX(180deg) rotateY(180deg);
            transform: perspective(900px) rotateY(360deg) rotateX(360deg);
            transform-origin: center center 100px;
        }
        main{
            display: flex;
            /* border: solid 5px silver; */
            width: 300px;
            height: 300px;
            transform-style: preserve-3d;
            transform: perspective(900px) rotateY(45deg);
            transition: 3s;
            transform-origin: center center 100px;
        }
        div{
            width: 200px;
            height: 200px;
            background: #f1c40f;
            font-size: 4em;
            display: flex;
            position: absolute;
            justify-content: center;
            align-items: center;
            transform-origin: center center 100px;
            perspective: 0.3;
        }
        div:nth-child(1){
            background: #e67e22;
            transform: rotateY(90deg);
        }
        div:nth-child(2){
            background: #3498db;
            transform: rotateY(180deg);
        }
        div:nth-child(3){
            background: #9b59b6;
            transform: rotateY(270deg);
        }
        div:nth-child(4){
            background: #c0392b;
            transform: rotateY(360deg);
        }
        div:nth-child(5){
            background: #c0392b;
            transform-origin: top;
            transform: rotateX(90deg);
        }
        div:nth-child(6){
            background: #c0392b;
            transform-origin: bottom;
            transform: rotateX(-90deg);
        }
    </style>
</head>
<body>
    <main>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </main>
</body>
</html>

 

点赞

发表评论

昵称和uid可以选填一个,填邮箱必填(留言回复后将会发邮件给你)
tips:输入uid可以快速获得你的昵称和头像