javascript实现魔方效果的方法：1、创建一个HTML文件；2、创建需要的div块；3、通过css和js代码“for(var n = 0; n < arr.length; n++){...}”实现魔方效果即可。
本文操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。
javascript怎么实现魔方效果？
实现效果：
魔方动态转换，同时每个面里的每个块都能进行动态变换。
实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>魔方</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
width: 100%;
height: 100%;
background: radial-gradient(#fff,pink);
}
.container{
width: 300px;
height: 300px;
margin:150px auto;
perspective: 20000px;
}
.box{
width: 300px;
height: 300px;
border:1px solid transparent;
box-sizing: border-box;
position:relative;
transform-style: preserve-3d;
animation: rotate 10s linear infinite;
}
@keyframes rotate{
100%{
transform:rotatex(360deg) rotatey(360deg) rotatez(360deg);
}
}
.box-page{
width: 300px;
height: 300px;
position: absolute;
box-sizing: border-box;
transform-style: preserve-3d;
}
.top{
transform: translateZ(150px);
}
.bottom{
transform: translateZ(-150px) rotateX(180deg);
}
.left{
transform: translateX(-150px) rotateY(-90deg);
}
.right{
transform: translateX(150px) rotateY(90deg);
}
.before{
transform: translateY(150px) rotateX(-90deg);
}
.after{
transform: translateY(-150px) rotateX(90deg);
}
.box-page div:first-child,.box-page div:nth-child(3),.box-page div:nth-child(5),.box-page div:nth-child(7),.box-page div:nth-child(9){
transform: rotateY(0deg);
animation: rotatey 6s linear infinite;
}
@keyframes rotatey{
20%{
transform: rotateY(0deg);
background-size: 300px 300px;
}
40%{
transform: rotateY(540deg);
background-size: 100px 100px;
}
60%{
transform: rotateY(540deg);
background-size: 100px 100px;
}
80%{
transform: rotateY(0deg);
background-size:300px 300px;
}
}
.box-page div:nth-child(2),.box-page div:nth-child(4),.box-page div:nth-child(6),.box-page div:nth-child(8)
{
transform: rotateX(0deg);
animation: rotatex 6s linear infinite;
}
@keyframes rotatex{
20%{
transform: rotateX(0deg);
background-size: 300px 300px;
}
40%{
transform: rotateX(540deg);
background-size: 100px 100px;
}
60%{
transform: rotateX(540deg);
background-size: 100px 100px;
}
80%{
transform: rotateX(0deg);
background-size: 300px 300px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<div class="top box-page"></div>
<div class="bottom box-page"></div>
<div class="left box-page"></div>
<div class="right box-page"></div>
<div class="before box-page"></div>
<div class="after box-page"></div>
</div>
</div>
<script type="text/javascript">
var arr=document.querySelectorAll(".box>div");
for(var n = 0; n < arr.length; n++){
//行遍历
for(var i=0; i<3; i++){
//列遍历
for(var j=0; j<3; j++){
var divs=document.createElement("div");
divs.style.cssText="width:100px; height:100px; border:2px solid #fff; box-sizing:border-box;position:absolute; background-image:url(imgs/a"+n+".jpg); background-size:300px 300px;" ;
arr[n].appendChild(divs);
divs.style.left=j*100+"px";
divs.style.top=i*100+"px";
divs.style.backgroundPositionX=-j*100+"px";
divs.style.backgroundPositionY=-i*100+"px";
}
}
}
</script>
</body>
</html>推荐学习：《javascript基础教程》
作者：藏色散人
1、 button type=button rel=drevil data-content=报名截止时间：'+time+' data-container=body data-toggle=po...
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。2011年，twitter的“一小撮”工...
Vue 自动创建的快捷键是 v-model。这个快捷键可以将表单输入元素（input、textarea、select 等）和 Vue 实例中的数据进行双向绑...
1.Application CacheHTML5引入应用缓存，意味着web应用可以进行缓存，即使在没有网络的情况下也能使用。application cache有三个...
在css中，可以使用filter属性来改变图片颜色，例如：使用“filter:grayscale(%);”将图片设置为黑白、“filter: sepia(%);”将图...
css设置div的高度的方法：首先在div标签中添加style属性；然后在style属性中添加height属性并写明固定的高度即可，如【style=hei...
本篇文章主要给大家介绍html中embed 标签的定义及用法。对于HTML学习者来说，标签的使用是至关重要的。那么对于新手来说，除了HT...