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;
/* border:1px solid #000;*/
margin:150px auto;
perspective: 20000px;
}
.Box{
width: 300px;
height: 300px;
border:1px solid transparent;
Box-sizing: border-Box;
position:relative;
transform-style: preserve-3d;
/*transform: rotateX(45deg) rotateY(45deg);*/
animation: rotate 10s linear infinite;
}
/*@keyframes ro{
0%{
transform:rotateX(0deg) rotateY(0deg);
}
100%{
transform: rotateX(360deg) rotateY(360deg);
}
}*/
@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{
/*background-color: red;*/
transform: translateZ(150px);
}
.bottom{
/*background-color: pink;*/
transform: translateZ(-150px) rotateX(180deg);
}
.left{
/*background-color: orange;*/
transform: translateX(-150px) rotateY(-90deg);
}
.right{
/*background-color: green;*/
transform: translateX(150px) rotateY(90deg);
}
.before{
/*background-color: purple;*/
transform: translateY(150px) rotateX(-90deg);
}
.after{
/*background-color: blue;*/
transform: translateY(-150px) rotateX(90deg);
}
/* .Box-page div:nth-child(1){
animation: a1 4.5s ease-in 0.5s;
}
.Box-page div:nth-child(2){
animation: a1 4.5s ease-in 1s;
}
.Box-page div:nth-child(3){
animation: a1 4.5s ease-in 1.5s;
}
.Box-page div:nth-child(4){
animation: a1 4.5s ease-in 2s;
}
.Box-page div:nth-child(5){
animation: a1 4.5s ease-in 2.5s;
}
.Box-page div:nth-child(6){
animation: a1 4.5s ease-in 3s;
}
.Box-page div:nth-child(7){
animation: a1 4.5s ease-in 3.5s;
}
.Box-page div:nth-child(8){
animation: a1 4.5s ease-in 4s;
}
.Box-page div:nth-child(9){
animation: a1 4.5s ease-in 4.5s;
}
@keyframes a1{
0%{
transform: translateZ(0px) scale(0) rotateZ(0deg);
}
20%{
transform: translateZ(300px) scale(0) rotateZ(720deg);
}
90%{
transform: translateZ(300px) scale(0) rotateZ(720deg);
}
100%{
transform: translateZ(0px) scale(0) rotateZ(0deg);
}
}*/
.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基础教程》
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
