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 天前
快速搭建B/S架构HTML演示页:从工具选择到实战落地
前端·架构·html
小刘鸭地下城1 天前
优雅表格设计:CSS 美化技巧详解
css
虫虫rankourin1 天前
在 create-react-app (CRA) 创建的应用中使用 react-router-dom v7以及懒加载的使用方法
前端·react.js
小刘鸭地下城1 天前
Web安全必备:关键 HTTP 标头解析
前端
yddddddy1 天前
html基本知识
前端·html
荣达1 天前
koa洋葱模型理解
前端·后端·node.js
小刘鸭地下城1 天前
网页深色模式完整实现:从响应式设计到系统主题联动
css
兔子不吃草~1 天前
Transformer学习记录与CNN思考
学习·cnn·transformer
reembarkation1 天前
使用pdfjs-dist 预览pdf,并添加文本层的实现
前端·javascript·pdf
KenXu1 天前
F2C-PTD工具将需求快速转换为代码实践
前端