纯HTML+CSS实现3D炫酷魔方（相册）

最新推荐文章于 2024-05-14 22:45:25 发布

高稚气菌

最新推荐文章于 2024-05-14 22:45:25 发布

阅读量7.1k

点赞数 9

文章标签： css html 3d

本文链接：https://blog.csdn.net/weixin_51261234/article/details/122080964

版权

文章目录引言：效果演示：正文：1.HTML部分CSS部分：part 1.我们先实现大盒子在页面垂直水平居中的效果：part 2.我们来设置第二大盒子，加旋转效果。part 3.将外部盒子形成正方形盒子；注意每个面在X,Y,Z轴上的旋转角度。part 3.外部六面悬浮效果：part 4.实现内部的魔方part 5.添加音乐part 6.结束展示：代码：闲聊：注意：完整代码在本文的最后面，前面分散的代码是我的讲解部分，如果只想使用代码，可以直接到本文的最下面取。引言：本周我们专业实训，实训的内容是h

摘要由CSDN通过智能技术生成

文章目录

注意：完整代码在本文的最后面，前面分散的代码是我的讲解部分，如果只想使用代码，可以直接到本文的最下面取。

引言：

本周我们专业实训，实训的内容是html+css，但这些内容我已经学习过了，无聊之余想到自己在学习HTML和CSS的时候，写过的3D魔方特效，感觉还不错，于是乘着这几天实训有时间，自己又手敲一遍并向大家展示如何仅用HTML+CSS来实现炫酷的3D旋转魔方相册（可在里外12个面放上图片（至于是谁的图片，懂得都懂，哈哈哈））。废话不多说，上才艺。

效果演示：

1640140635938

正文：

标题也说了，我们将使用HTML和CSS来实现这个相册，所以我将分HTML和CSS两部分来讲。其中我也会分析其中的实现原理。

1.HTML部分

首先我们分析一下3D魔方的原理。

根据上图，我们可以发现，我们实现的3D魔方分为内外两个部分，当我们的鼠标移动在魔方上时，外部的魔方将向自己面垂直向外的方向移动。然后给人呈现出一种炫酷的感觉。看到图片的时候，我们如何来完成这个作品的大致思路就出来了。首先，这个作品是由两个魔方组成，每个魔方又是由6个正方形的面组成。由此可知，我们的HTML部分就由12个正方形的盒子组成。既然知道了HTML部分的组成，那我们就来实现作品的这一部分。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>魔方</title>
    <link rel="stylesheet" type="text/css" href="css/立体.css">
</head>

<body>
    //box 这个大盒子来实现整个魔方在页面上的位置
    <div class="box">
        //box1 这个盒子来实现旋转的效果
        <div class="box1">
            //上面六个为外部盒子
            <div class="font"></div>
            <div class="back"></div>
            <div class="top"></div>
            <div class="bottom"></div>
            <div class="left"></div>
            <div class="right"></div>

            //下面六个为内部盒子
            <i class="i-font"></i>
            <i class="i-back

最低0.47元/天解锁文章

高稚气菌

关注

9
点赞
踩
54

收藏

觉得还不错? 一键收藏
8
评论
纯HTML+CSS实现3D炫酷魔方（相册）

文章目录引言：效果演示：正文：1.HTML部分CSS部分：part 1.我们先实现大盒子在页面垂直水平居中的效果：part 2.我们来设置第二大盒子，加旋转效果。part 3.将外部盒子形成正方形盒子；注意每个面在X,Y,Z轴上的旋转角度。part 3.外部六面悬浮效果：part 4.实现内部的魔方part 5.添加音乐part 6.结束展示：代码：闲聊：注意：完整代码在本文的最后面，前面分散的代码是我的讲解部分，如果只想使用代码，可以直接到本文的最下面取。引言：本周我们专业实训，实训的内容是h
复制链接

扫一扫