简单前端页面设计（JS+CSS）—

魔方变换

*问题描述：想要实现一个3D魔方，魔方不停的在旋转，且魔方每个面都由9个部分组成，每个部分也有一定的动画效果

具体的要求请参见MOOC北京林业大学（Web前端开发课程）

*HTML代码+JS代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>魔方测试</title><link type="text/css" rel="stylesheet" href="webstyle.css"></head>
<body><div id="container"><div class="mfbox"><div class="box-sheet top"></div><div class="box-sheet bottom"></div><div class="box-sheet left"></div><div class="box-sheet right"></div><div class="box-sheet font"></div><div class="box-sheet behind"></div></div></div><script>var lists=document.querySelectorAll(".box-sheet");
for(let index =0;index< lists.length;index++){for(var row=0;row<3;row++){for(var col=0;col<3;col++){//添加行列var imgCont=document.createElement("div");var heights=100*row;var widths=100*col;imgCont.style.cssText="width:100px;left:"+widths+"px"+";height:100px;top:"+heights+"px;"+"border:1px solid white;box-sizing: border-box;position:absolute;background-image:url(img/a"+index+".jpg);max-width:300px;max-height:300px;background-size:300px 300px;"; lists[index].appendChild(imgCont);imgCont.style.backgroundPositionX=-col*100+"px";imgCont.style.backgroundPositionY=-row*100+"px";           }}
}</script></body>
</html>

*CSS代码（使用了animation,动画自定义的）

* {margin: 0px;padding: 0px;}
#container {width: 300px;height: 300px;margin: 0px auto;margin-top: 150px;perspective: 3000px;}
.mfbox {width: 300px;height: 300px;position: relative; transform-style: preserve-3d;animation: self-rotate 4s ease-in-out  infinite ;}
@keyframes self-rotate {0%{transform:rotateX(0deg) rotateY(0deg);}100%{transform: rotateX(360deg) rotate(360deg) ;}}
.box-sheet {width: 300px;height: 300px;position: absolute;transform-style: preserve-3d;}
.box-sheet div:nth-child(1){animation: boxmove 10s linear infinite 0s;
}
.box-sheet div:nth-child(2){animation: boxmove 10s linear infinite 0.5s;
}
.box-sheet div:nth-child(3){animation: boxmove 10s linear infinite 1s;
}
.box-sheet div:nth-child(4){animation: boxmove 10s linear infinite 1.5s;
}
.box-sheet div:nth-child(5){animation: boxmove 10s linear infinite 2s;
}
.box-sheet div:nth-child(6){animation: boxmove 10s linear infinite 2.5s;
}
.box-sheet div:nth-child(7){animation: boxmove 10s linear infinite 3s;
}
.box-sheet div:nth-child(8){animation: boxmove 10s linear infinite 3.5s;
}
.box-sheet div:nth-child(9){animation: boxmove10s linear infinite 4s;
}@keyframes boxmove{0%{transform: rotateZ(0deg) translateZ(0px) scale(1);}20%{transform: rotateZ(180deg) translateZ(300px) scale(1);}80%{transform: rotateZ(180deg) translateZ(3000px) scale(1);}100%{transform: rotateZ(0deg) translateZ(0px) scale(1);}
}.top{transform: translateZ(150px) ;
}.bottom{transform: translateZ(-150px) ;
}
.left{transform: translateX(-150px) rotateY(90deg) ;
}
.right{transform: rotate(180deg);transform: translateX(150px) rotateY(90deg) ;
}
.font{transform: rotate(180deg);transform: translateY(150px) rotateX(90deg) ;
}
.behind{transform: translateY(-150px) rotateX(90deg) ;
}

简单前端页面设计（JS+CSS）——魔方变换相关推荐

【HTML响应式项目】成人教育官网前端页面（HTML+CSS+JS实现三端适应）
项目源码已上传至码云仓库:云南农业职业技术学院/HTML响应式成人教育官网前端页面(HTML+CSS+JS实现) 项目演示地址:成人教育网 AAP端下载地址:成人教育网APP端.apk-互联网文档类资 ...
Web前端页面设计流程及注意事项，谨记！
每天我们打开电脑,看到各种各样的web前端页面.你知道他们是如何制作的吗?为了让页面更具有规范性,让使用者更加方便,在制作页面过程中必须遵循一定的设计流程.在这里就为大家详细介绍一下制作一个Web前端 ...
因分辨率变化html页面布局跳动_Web前端页面设计流程及注意事项，谨记！
每天我们打开电脑,看到各种各样的web前端页面.你知道他们是如何制作的吗?为了让页面更具有规范性,让使用者更加方便,在制作页面过程中必须遵循一定的设计流程.在这里就为大家详细介绍一下制作一个Web前端 ...
实现一个博客系统(前端页面设计)
博客系统的四个页面展示效果: 注意CSS有一些隐式规定,下面代码的状态:上下边距不是50px(不是两者边距之和,而是他们的最大值);上下边距塌方问题,况且只在垂直方向有,水平方向就是他们的和:况且他的 ...
新闻发布系统界面 html源码,新闻发布系统的前端页面设计
[实例简介] 这个一个简单的新闻发布系统的前端页面,基本上功能都有. [实例截图] [核心代码] kindeditor └── kindeditor ├── jsp │ ├── demo.jsp ...
网站建设页面设计中CSS正确书写
转自: http://blog.onlygrape.com/webdesign-css/293 1.css 字体简写规则当使用css定义字体时你可能会这样做: font-size: 1em; lin ...
eclipse插件开发(三) 简易4页签编辑器(源码 | 设计 | JS | CSS)配色修复JS多行注释问题
本此主要修复了修改html/js/css后,实时刷新设计界面,并且修复了当js多行注释时,修复注释内容后变成黑色字体的bug,达到基本上能在实际应用的效果源码 https://download.cs ...
html htc控件详解,*.HTC 文件的简单介绍-网页设计,HTML/CSS
今天在论坛上面看到有些兄弟不知道htc是什么东西.小生在这里稍微说一下. 从5.5版本开始,internet explorer(ie)开始支持web 行为的概念.这些行为是由后缀名为.htc的脚本文件 ...
web前端页面设计海贼王动漫网页作业 HTML+CSS简单的学生网页作业源码

简单前端页面设计（JS+CSS）——魔方变换

魔方变换

简单前端页面设计（JS+CSS）——魔方变换相关推荐

最新文章

热门文章