javascript怎么实现魔方效果
导读：收集整理的这篇文章主要介绍了javascript怎么实现魔方效果，觉得挺不错的，现在分享给大家，也给大家做个参考。javascript实现魔方效果的方法：1、创建一个HTML文件；2、创建需要的div块；3、通过css和js代码“for(V...
收集整理的这篇文章主要介绍了javascript怎么实现魔方效果，觉得挺不错的，现在分享给大家，也给大家做个参考。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;
i3;
i++){
//列遍历 for(var j=0;
j3;
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基础教程》
以上就是javascript怎么实现魔方效果的详细内容，更多请关注其它相关文章！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： javascript怎么实现魔方效果
本文地址： https://pptw.com/jishu/592959.html