Maison > Article > interface Web > Comment obtenir l'effet Rubik's Cube en javascript
Comment obtenir l'effet Rubik's Cube en javascript
- 藏色散人original
- 2021-11-18 15:56:442943parcourir
Comment obtenir l'effet Rubik's Cube en utilisant JavaScript : 1. Créez un fichier HTML ; 2. Créez le bloc div requis ; 3. Utilisez le code CSS et js "for(var n = 0; n
L'environnement d'exploitation de cet article : système Windows 7, version JavaScript 1.8.5, ordinateur Dell G3.
Comment obtenir l'effet Rubik's Cube en utilisant JavaScript ?
Obtenez l'effet :
Transformation dynamique du Rubik's Cube, et chaque bloc de chaque face peut être transformé dynamiquement.
Code d'implémentation :
<!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>Apprentissage recommandé : "Tutoriel de base javascript"
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment implémenter la fonction copier-coller en javaScriptArticle suivant：Comment implémenter la fonction copier-coller en javaScript