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>
相关推荐
孤水寒月2 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀2 小时前
html初学者第一天
前端·html
耶啵奶膘5 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家5 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689976 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽7 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头7 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
码荼7 小时前
学习开发之hashmap
java·python·学习·哈希算法·个人开发·小白学开发·不花钱不花时间crud
墨菲安全8 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing8 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript