3D立体盒子练习-阿里云开发者社区

3D立体盒子练习

2024-05-29 15

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 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>

3D立体盒子练习

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

HTML关键代码：

CSS关键代码：

热门文章

最新文章

相关电子书