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

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

html
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魔方日历动画.rar
07-10
HTML5 3D魔方日历动画,当你拧魔方的时候，魔方可以响应而变化，呈现出很强的立体感，用HTML5实现此种效果，并不算难，若要使用传统的HTML，似乎有点无从下手。本魔方动画，一共有三种形式，可单击左上角的链接切换魔方日历，学习HTML5前端设计的可不要键哦。用这种形式显示日历，真的很漂亮哦。
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魔方动画代码.zip
05-23
HTML5 3D魔方动画代码，魔方立方体旋转动画，彩色魔方动画。
html制作魔方动画，每个面九张小图飞起来
執筆冩回憶
03-08 7678
&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动画效果，实现了魔方的转体效果，将魔方的每一次转动都很好的实现，期待大家的评论，期待和大家一起学习
html+Css3炫酷动态魔方代码
qq_45629699的博客
12-07 1767
<!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+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+js旋转魔方实现
06-30
在这个"html+css+js旋转魔方实现"项目中，我们将探讨如何利用这三者来创建一个可以旋转的3D魔方效果。 首先，HTML（HyperText Markup Language）是网页的基础结构，用于定义页面的内容和布局。在这个项目中，HTML会...
html实现动态魔方效果(rotate、translate)
weixin_43587078的博客
10-18 1695
//样式如下 <style type="text/css"> *{ /* 清除默认样式 */ padding: 0; margin: 0; list-style: none; } ul{ width: 200px; height: 200px; margin: 100px auto; /*开启定位，这样子元素使用%作为宽高单位是，将参考它*/ position: re
HTML+CSS+JS实现简单的魔方
热门推荐
One of thre_tigers的博客
01-17 1万+
3天把JS过了一遍，因为网课太水就没能继续看下去，我知道这远远不够，计划研究JavaScript编程艺术，在此之前，先来一个小设计熟悉JS编程习惯： 案例介绍： 设计一个不停旋转的4阶魔方，魔方每一个面的方格能够依次飞出原位置，稳定在一个大的范围，紧接着旋转 恢复原位。魔方之下有一个圆形的发光区域。 HTML部分： HTML部分主要是结构，包括了三个部分，魔方之下的圆形区域主容器contain...
魔方html效果,如何使用css3实现魔方的动画效果（完整代码）
weixin_36197248的博客
06-03 464
本篇文章给大家带来的内容是关于如何使用css3实现魔方的动画效果(完整代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。Document*{margin: 0;padding: 0;}.box{width: 300px;height: 300px;margin: 100px auto;position: relative;transform-style: preserve-3d...
自学web前端练手——魔方实现（css3+html+js）
lvshaoshishang的博客
03-23 2152
以css3的平移、旋转、动画为主体构成。 效果如下：（发现不能传小视频就只能粗略截几张图了） 有九宫格飞出去飞回来的效果（一边旋转一边飞），但只设置飞一次，飞回来后只旋转魔方，但我发现有一个面永远转不到他不知道为啥_(:з」∠)_ 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charse...
基于 HTML+ECharts 实现的大数据可视化平台模板（含源码）
柯晓楠
07-24 3382
大数据的可视化对于企业决策、市场分析和业务洞察至关重要。通过直观的数据展示，团队可以快速理解复杂的数据模式，发现潜在的业务机会。本文将详细介绍如何利用 HTML 和 ECharts 实现一个功能丰富的大数据可视化平台模板。
iframe 渲染请求到的 html (邮件预览), 避免样式污染 + 打印 iframe 邮件详情 + iframe 预览邮件时固定水平滚动条在视口底部
最新发布
汤一飞
07-25 1090
iframe 预览邮件 + 打印邮件 + 模拟滚动条
初识HTML文件，创建自己的第一个网页！
2301_79959126的博客
07-24 1050
本文旨在初步介绍HTML（超文本标记语言），帮助读者理解HTML中的相关术语及概念，并使读者在完成本文的阅读后可以快速上手编写一个属于自己的简易网页。
基于 HTML+ECharts 实现监控平台数据可视化大屏（含源码）
柯晓楠
07-24 1174
我们实现了一个基于 HTML 和 ECharts 的监控平台数据可视化大屏。这个大屏不仅能够直观地展示监控数据，还能通过交互功能提升用户体验。希望本文能对你在实现类似项目时提供一些帮助和启发。
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、付费专栏及课程。

余额充值