3D立体盒子练习-Toy模板网

这篇具有很好参考价值的文章主要介绍了3D立体盒子练习。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

综合运用CSS转换知识，编写了一个简单的可旋转的立体盒子，可以结合学习笔记六来进行学习。

HTML关键代码：

<body>
    <div class="box">
        <div class="top">1</div>
        <div class="bottom">2</div>
        <div class="left">3</div>
        <div class="right">4</div>
        <div class="before">5</div>
        <div class="back">6</div>
    </div>

</body>

CSS关键代码：

<style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
        }

        .box {
            margin: 20px auto;
            width: 100px;
            height: 100px;
            background-color: aqua;
            position: relative;
            transition: all 2s ease;
            transform-style: preserve-3d;
        }

        .box div {
            width: 100px;
            height: 100px;
            position: absolute;
            left: 0px;
            top: 0px;
            text-align: center;
            line-height: 100px;
            font-size: 40px;

        }

        .box:hover{
            transform: rotateX(360deg) rotateY(360deg);
        }

        .top {
            transform: translatey(-100px) rotateX(90deg);
            transform-origin: center bottom;
            background-color: rgba(255, 0, 0, 0.8);
        }

        .bottom {
            background-color: rgba(0, 0, 0, 0.8);
            transform: translatey(100px) rotateX(-90deg);
            transform-origin: center top;
        }

        .left {
            background-color: rgba(0, 255, 0, 0.8);
            transform: translateX(-100px) rotateY(-90deg);
            transform-origin: right center;
        }

        .right {
            background-color: rgba(0, 0, 255, 0.8);
            transform: translateX(100px) rotateY(90deg);
            transform-origin: left center;
        }

        .before {
            background-color: rgba(255, 255, 0, 0.5);
            z-index: 10;
        }

        .back {
            background-color: rgba(255, 0, 255, 0.8);
            transform: translateZ(-100px);
        }
    </style>

文章来源地址https://www.toymoban.com/news/detail-818503.html

到了这里，关于3D立体盒子练习的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！