溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了javascript如何實(shí)現(xiàn)魔方效果，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
javascript實(shí)現(xiàn)魔方效果的方法：1、創(chuàng)建一個(gè)HTML文件；2、創(chuàng)建需要的div塊；3、通過(guò)css和js代碼“for(var n = 0; n < arr.length; n++){...}”實(shí)現(xiàn)魔方效果即可。
本文操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。
實(shí)現(xiàn)效果：
魔方動(dòng)態(tài)轉(zhuǎn)換，同時(shí)每個(gè)面里的每個(gè)塊都能進(jìn)行動(dòng)態(tài)變換。
實(shí)現(xiàn)代碼：
<!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>感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“javascript如何實(shí)現(xiàn)魔方效果”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼