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>
相关推荐
大春儿的试验田1 分钟前
高并发收藏功能设计:Redis异步同步与定时补偿机制详解
java·数据库·redis·学习·缓存
RainbowSea19 分钟前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴24 分钟前
笨方法学python -练习14
java·前端·python
Mintopia31 分钟前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
Mintopia42 分钟前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Penk是个码农1 小时前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc
MrSkye1 小时前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试
白瓷梅子汤1 小时前
跟着官方示例学习 @tanStack-form --- Linked Fields
前端·react.js
爱学习的茄子1 小时前
深入理解JavaScript闭包:从入门到精通的实战指南
前端·javascript·面试
金色光环1 小时前
【Modbus学习笔记】stm32实现Modbus
笔记·stm32·学习