html+css原生动画魔方小例子

最新推荐文章于 2024-07-24 17:16:26 发布
最新推荐文章于 2024-07-24 17:16:26 发布
阅读量1.3k 收藏 6
点赞数 5
分类专栏： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40770473/article/details/108852307
版权

HTML CSS 3D动画 魔方 关键帧动画
关键词由CSDN通过智能技术生成
css 同时被 2 个专栏收录
6 篇文章 0 订阅
订阅专栏
html
3 篇文章 0 订阅
订阅专栏

html+css原生动画-魔方小例子

1效果图

在这里插入图片描述

2html代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>3D魔方</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
<h1>3D魔方</h1>
    <div class="outer">
        <div class="inner">
            <div class="front">
                <div class="front1">
                		<img src="images/1.jpg" alt="" />
                </div>
                <div class="front2">
               	 	<img src="images/1.jpg" alt="" />
                </div>
                <div class="front3">	
                		<img src="images/1.jpg" alt="" />
                </div>
                <div class="front4">
               	 <img src="images/1.jpg" alt="" />
                </div>
                <div class="front5">
                	<img src="images/1.jpg" alt="" />
                </div>
                <div class="front6">
                		<img src="images/1.jpg" alt="" />
                </div>
                <div class="front7">
                		<img src="images/1.jpg" alt="" />
                </div>
                <div class="front8">
                	<img src="images/1.jpg" alt="" />
                </div>
                <div class="front9">
                		<img src="images/1.jpg" alt="" />
                </div>
            </div>
            <div class="after">
                <div class="after1">
                		<img src="images/1.jpg" alt="" />
                </div>
                <div class="after2">
                		<img src="images/1.jpg" alt="" />
                </div>
                <div class="after3">
                		<img src="images/1.jpg" alt="" />
                </div>
                <div class="after4">
                		<img src="images/1.jpg" alt="" />
                </div>
                <div class="after5">
                		<img src="images/1.jpg" alt="" />
                </div>
                <div class="after6">
                		<img src="images/1.jpg" alt="" />
                </div>
                <div class="after7">
                		<img src="images/1.jpg" alt="" />
                </div>
                <div class="after8">
                		<img src="images/1.jpg" alt="" />
                </div>
                <div class="after9">
                		<img src="images/1.jpg" alt="" />
                </div>
            </div>
            <div class="left">
                <div class="left1">
                		<img src="images/1.jpg" alt="" />
                </div>
                <div class="left2">
                		<img src="images/1.jpg" alt="" />
                </div>
                <div class="left3">
                		<img src="images/1.jpg" alt="" />
                </div>
                <div class="left4">
                		<img src="images/1.jpg" alt="" />
                </div>
                <div class="left5">
                		<img src="images/1.jpg" alt="" />
                </div>
                <div class="left6">
                		<img src="images/1.jpg" alt="" />
                </div>
                <div class="left7">
                		<img src="images/1.jpg" alt="" />
                </div>
                <div class="left8">
                		<img src="images/1.jpg" alt="" />
                </div>
                <div class="left9">
                		<img src="images/1.jpg" alt="" />
                </div>
            </div>
            <div class="right">
                <div class="right1">
                		<img src="images/1.jpg" alt="" />
                </div>
                <div class="right2">
                		<img src="images/1.jpg" alt="" />
                </div>
                <div class="right3">
                		<img src="images/1.jpg" alt="" />
                </div>
                <div class="right4">
                		<img src="images/1.jpg" alt="" />
                </div>
                <div class="right5">
                		<img src="images/1.jpg" alt="" />
                </div>
                <div class="right6">
                		<img src="images/1.jpg" alt="" />
                </div>
                <div class="right7">
                		<img src="images/1.jpg" alt="" />
                </div>
                <div class="right8">
                		<img src="images/1.jpg" alt="" />
                </div>
                <div class="right9">
                		<img src="images/1.jpg" alt="" />
                </div>
            </div>
            <div class="up">
                <div class="up1">
                		<img src="images/1.jpg" alt="" />
                </div>
                <div class="up2">
                		<img src="images/1.jpg" alt="" />
                </div>
                <div class="up3">
                		<img src="images/1.jpg" alt="" />
                </div>
                <div class="up4">
                		<img src="images/1.jpg" alt="" />
                </div>
                <div class="up5">
                		<img src="images/1.jpg" alt="" />
                </div>
                <div class="up6">
                		<img src="images/1.jpg" alt="" />
                </div>
                <div class="up7">
                		<img src="images/1.jpg" alt="" />
                </div>
                <div class="up8">
                		<img src="images/1.jpg" alt="" />
                </div>
                <div class="up9">
                		<img src="images/1.jpg" alt="" />
                </div>
            </div>
            <div class="down">
                <div class="down1">
                		<img src="images/1.jpg" alt="" />
                </div>
                <div class="down2">
                		<img src="images/1.jpg" alt="" />
                </div>
                <div class="down3">
                		<img src="images/1.jpg" alt="" />
                </div>
                <div class="down4">
                		<img src="images/1.jpg" alt="" />
                </div>
                <div class="down5">
                		<img src="images/1.jpg" alt="" />
                </div>
                <div class="down6">
                		<img src="images/1.jpg" alt="" />
                </div>
                <div class="down7">
                		<img src="images/1.jpg" alt="" />
                </div>
                <div class="down8">
                		<img src="images/1.jpg" alt="" />
                </div>
                <div class="down9">
                		<img src="images/1.jpg" alt="" />
                </div>
            </div>
        </div>
    </div>
</body>

</html>

3css样式

/*全局样式*/

* {
    margin: 0;
    padding: 0;
}

h1 {
    text-align: center;
    margin-top: 50px;
}
img{
	width:100%;
	height:100%;
}
body>div>div>div>div{
	overflow: hidden;
}
/*外层容器样式*/

.outer {
    position: absolute;
    top: 50%;
    left: 45%;
}


/*内层容器样式*/

.inner {
    /*开启3D视图*/
    transform-style: preserve-3d;
        /*动画样式*/
    animation: change 6s linear infinite;
}


/*动画*/

@keyframes change {
    0% {
        transform: translateZ(-10em) rotateX(0deg) rotateY(0deg);
    }
    33% {
        transform: translateZ(-10em) rotateX(120deg) rotateY(240deg);
    }
    66% {
        transform: translateZ(-10em) rotateX(240deg) rotateY(480deg);
    }
    100% {
        transform: translateZ(-10em) rotateX(360deg) rotateY(720deg);
    }
}
/*六大面通用样式*/
.inner>div {
    height: 308px;
    width: 308px;
    text-align: center;
    line-height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
}


/*前面样式*/

.front {
    margin-top: -154px;
    margin-left: -154px;
    border: 5px solid #AF2BB5;
    transform: translateZ(158px);
}


/*后面样式*/

.after {
    margin-top: -154px;
    margin-left: -154px;
    border: 5px solid #1EA26E;
    transform: translateZ(-158px);
}


/*左面样式*/

.left {
    margin-top: -154px;
    margin-left: -154px;
    border: 5px solid #D1CF18;
    transform: rotateY(90deg) translateZ(158px);
}


/*右面样式*/

.right {
    margin-top: -154px;
    margin-left: -154px;
    border: 5px solid #197FAA;
    transform: rotateY(90deg) translateZ(-158px);
}


/*上面样式*/

.up {
    margin-top: -154px;
    margin-left: -154px;
    border: 5px solid #C91443;
    transform: rotateX(90deg) translateZ(158px);
}


/*下面样式*/

.down {
    margin-top: -154px;
    margin-left: -154px;
    border: 5px solid #0FB0AC;
    transform: rotateX(90deg) translateZ(-158px);
}


/*前面9个小div样式*/

.front>div {
    height: 100px;
    width: 100px;
    background: #8A2BE2;
    border-radius: 10px;
}

.front1 {
    position: absolute;
    left: 2px;
    top: 2px;
}

.front2 {
    position: absolute;
    left: 104px;
    top: 2px;
}

.front3 {
    position: absolute;
    left: 206px;
    top: 2px;
}

.front4 {
    position: absolute;
    left: 2px;
    top: 104px;
}

.front5 {
    position: absolute;
    left: 104px;
    top: 104px;
}

.front6 {
    position: absolute;
    left: 206px;
    top: 104px;
}

.front7 {
    position: absolute;
    left: 2px;
    top: 206px;
}

.front8 {
    position: absolute;
    left: 104px;
    top: 206px;
}

.front9 {
    position: absolute;
    left: 206px;
    top: 206px;
}


/*后面9个小div样式*/

.after div {
    height: 100px;
    width: 100px;
    background: #04EC99;
    border-radius: 10px;
}

.after1 {
    position: absolute;
    left: 2px;
    top: 2px;
}

.after2 {
    position: absolute;
    left: 104px;
    top: 2px;
}

.after3 {
    position: absolute;
    left: 206px;
    top: 2px;
}

.after4 {
    position: absolute;
    left: 2px;
    top: 104px;
}

.after5 {
    position: absolute;
    left: 104px;
    top: 104px;
}

.after6 {
    position: absolute;
    left: 206px;
    top: 104px;
}

.after7 {
    position: absolute;
    left: 2px;
    top: 206px;
}

.after8 {
    position: absolute;
    left: 104px;
    top: 206px;
}

.after9 {
    position: absolute;
    left: 206px;
    top: 206px;
}


/*左面9个小div样式*/

.left div {
    height: 100px;
    width: 100px;
    background: #F4F871;
    border-radius: 10px;
}

.left1 {
    position: absolute;
    left: 2px;
    top: 2px;
}

.left2 {
    position: absolute;
    left: 104px;
    top: 2px;
}

.left3 {
    position: absolute;
    left: 206px;
    top: 2px;
}

.left4 {
    position: absolute;
    left: 2px;
    top: 104px;
}

.left5 {
    position: absolute;
    left: 104px;
    top: 104px;
}

.left6 {
    position: absolute;
    left: 206px;
    top: 104px;
}

.left7 {
    position: absolute;
    left: 2px;
    top: 206px;
}

.left8 {
    position: absolute;
    left: 104px;
    top: 206px;
}

.left9 {
    position: absolute;
    left: 206px;
    top: 206px;
}


/*右面9个小div样式*/

.right div {
    height: 100px;
    width: 100px;
    background: #7FB6FF;
    border-radius: 10px;
}

.right1 {
    position: absolute;
    left: 2px;
    top: 2px;
}

.right2 {
    position: absolute;
    left: 104px;
    top: 2px;
}

.right3 {
    position: absolute;
    left: 206px;
    top: 2px;
}

.right4 {
    position: absolute;
    left: 2px;
    top: 104px;
}

.right5 {
    position: absolute;
    left: 104px;
    top: 104px;
}

.right6 {
    position: absolute;
    left: 206px;
    top: 104px;
}

.right7 {
    position: absolute;
    left: 2px;
    top: 206px;
}

.right8 {
    position: absolute;
    left: 104px;
    top: 206px;
}

.right9 {
    position: absolute;
    left: 206px;
    top: 206px;
}


/*上面9个小div样式*/

.up div {
    height: 100px;
    width: 100px;
    background: #FF7F8F;
    border-radius: 10px;
}

.up1 {
    position: absolute;
    left: 2px;
    top: 2px;
}

.up2 {
    position: absolute;
    left: 104px;
    top: 2px;
}

.up3 {
    position: absolute;
    left: 206px;
    top: 2px;
}

.up4 {
    position: absolute;
    left: 2px;
    top: 104px;
}

.up5 {
    position: absolute;
    left: 104px;
    top: 104px;
}

.up6 {
    position: absolute;
    left: 206px;
    top: 104px;
}

.up7 {
    position: absolute;
    left: 2px;
    top: 206px;
}

.up8 {
    position: absolute;
    left: 104px;
    top: 206px;
}

.up9 {
    position: absolute;
    left: 206px;
    top: 206px;
}


/*下面9个小div样式*/

.down div {
    height: 100px;
    width: 100px;
    background: #6FFFFA;
    border-radius: 10px;
}

.down1 {
    position: absolute;
    left: 2px;
    top: 2px;
}

.down2 {
    position: absolute;
    left: 104px;
    top: 2px;
}

.down3 {
    position: absolute;
    left: 206px;
    top: 2px;
}

.down4 {
    position: absolute;
    left: 2px;
    top: 104px;
}

.down5 {
    position: absolute;
    left: 104px;
    top: 104px;
}

.down6 {
    position: absolute;
    left: 206px;
    top: 104px;
}

.down7 {
    position: absolute;
    left: 2px;
    top: 206px;
}

.down8 {
    position: absolute;
    left: 104px;
    top: 206px;
}

.down9 {
    position: absolute;
    left: 206px;
    top: 206px;
}

4图片

在这里插入图片描述

5结构目录

在这里插入图片描述
谢谢观看

明天自己会更好
关注
  • 5
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
HTML5 3D魔方动画代码.zip
05-23
HTML5 3D魔方动画代码，魔方立方体旋转动画，彩色魔方动画。
HTML实现魔方
一起coding，一起嗨。
02-04 1653
转载自：用HTML+CSS3写一个会旋转的魔方 - 知乎 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie.
HTML5 3D魔方日历动画.rar
07-10
HTML5 3D魔方日历动画,当你拧魔方的时候，魔方可以响应而变化，呈现出很强的立体感，用HTML5实现此种效果，并不算难，若要使用传统的HTML，似乎有点无从下手。本魔方动画，一共有三种形式，可单击左上角的链接切换魔方日历，学习HTML5前端设计的可不要键哦。用这种形式显示日历，真的很漂亮哦。
html实现动态魔方效果(rotate、translate)
weixin_43587078的博客
10-18 1694
//样式如下 <style type="text/css"> *{ /* 清除默认样式 */ padding: 0; margin: 0; list-style: none; } ul{ width: 200px; height: 200px; margin: 100px auto; /*开启定位，这样子元素使用%作为宽高单位是，将参考它*/ position: re
html+Css3炫酷动态魔方代码
qq_45629699的博客
12-07 1765
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>动态魔方</title> <meta name="viewport" content="width=device-width, initial-scale=1">
html制作魔方动画，每个面九张小图飞起来
執筆冩回憶
03-08 7673
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;style type="text/css"&gt; *{ padding: 0; margin: 0; } .c
基于HTML+CSS动画的魔方爆炸效果
09-28
在这个名为“基于HTML+CSS动画的魔方爆炸效果”的项目中，开发者利用这两门技术创造了一个动态的、交互式的魔方爆炸特效。这个特效展示了HTML5的潜力以及CSS3在动画领域的强大功能。 首先，HTML（超文本标记语言）...
HTML+CSS+JavaScript原生购物网站首页案例
04-14
在构建一个基于HTML+CSS+JavaScript的原生购物网站首页案例时，我们需要理解这三个技术的核心概念以及它们如何协同工作来创建动态、交互式的网页。以下是一些相关知识点的详细说明： 1. **HTML（HyperText Markup ...
网页设计期末大作业+html+css
05-25
9个网页布局，学校让做的网站作业，虽然是比较基础的网页静态页面，不过我也希望你能做的规范一些，我们专业制作学生...DIV+css+js学生网站如何做？ 不靠这个吃饭--你还用自己做网站吗？ 大学生静态网页成品作业代做
html+css原生写法网站(江苏教育黄页).zip
12-14
基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于...
使用HTML+CSS实现魔方转体
09-28
基于HTML+CSS动画效果，实现了魔方的转体效果，将魔方的每一次转动都很好的实现，期待大家的评论，期待和大家一起学习
html+css+js旋转魔方实现
06-30
在这个"html+css+js旋转魔方实现"项目中，我们将探讨如何利用这三者来创建一个可以旋转的3D魔方效果。 首先，HTML（HyperText Markup Language）是网页的基础结构，用于定义页面的内容和布局。在这个项目中，HTML会...
HTML+CSS+JS实现简单的魔方
热门推荐
One of thre_tigers的博客
01-17 1万+
3天把JS过了一遍，因为网课太水就没能继续看下去，我知道这远远不够，计划研究JavaScript编程艺术，在此之前，先来一个小设计熟悉JS编程习惯： 案例介绍： 设计一个不停旋转的4阶魔方，魔方每一个面的方格能够依次飞出原位置，稳定在一个大的范围，紧接着旋转 恢复原位。魔方之下有一个圆形的发光区域。 HTML部分： HTML部分主要是结构，包括了三个部分，魔方之下的圆形区域主容器contain...
魔方html效果,如何使用css3实现魔方的动画效果（完整代码）
weixin_36197248的博客
06-03 462
本篇文章给大家带来的内容是关于如何使用css3实现魔方的动画效果(完整代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。Document*{margin: 0;padding: 0;}.box{width: 300px;height: 300px;margin: 100px auto;position: relative;transform-style: preserve-3d...
基于 HTML+ECharts 实现的大数据可视化平台模板（含源码）
柯晓楠
07-24 2414
大数据的可视化对于企业决策、市场分析和业务洞察至关重要。通过直观的数据展示，团队可以快速理解复杂的数据模式，发现潜在的业务机会。本文将详细介绍如何利用 HTML 和 ECharts 实现一个功能丰富的大数据可视化平台模板。
黑马JavaWeb企业级开发（知识清单）01——前端介绍，HTML实现标题：排版
apple_68589597的博客
07-21 1001
本篇文章是2023年最新黑马JavaWeb企业级开发（知识清单）01：前端介绍、html实现标题格式内容的总结，帮助需要学习Web开发的朋友温故而知新。
ASP.NET 生成分页 HTML 函数示例
一个九零后程序猿开发日志
07-24 65
函数会生成一个包含上一页、页码和下一页的 HTML 分页导航。
基于 HTML+ECharts 实现的数据可视化大屏案例（含源码）
最新发布
柯晓楠
07-24 379
数据可视化已成为企业决策和业务分析的重要工具。通过直观、动态的图表展示，数据可视化大屏能够帮助用户快速理解复杂的数据关系，发现潜在的业务趋势。本文将介绍如何利用 HTML 和 ECharts 实现一个功能丰富的数据可视化大屏案例。
HTML启动本地EXE的通用方法
07-22 816
HTML启动本地应用的解决方案
HTML+CSS网站开发入门指南
轻松学HTML+CSS网站开发 在本资源中，我们将探索HTML和CSS在网站开发中的应用。HTML是一种超文本链接语言，用于构建网页的结构和内容，而CSS是网页样式表，用于控制网页的外观和布局。通过学习HTML和CSS，我们可以...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值