Maison > Article > interface Web > Comment utiliser CSS3 pour obtenir l'effet d'animation du Rubik's Cube (code complet)

Comment utiliser CSS3 pour obtenir l'effet d'animation du Rubik's Cube (code complet)

不言original: 2018-09-11 17:33:003229parcourir

Le contenu de cet article explique comment utiliser CSS3 pour réaliser l'effet d'animation du Rubik's Cube (code complet). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. .

<!DOCTYPE html>    
<html>    
<head>    
<meta charset="UTF-8">    
<meta name="viewport" content="width=device-width, initial-scale=1.0">    
<meta http-equiv="X-UA-Compatible" content="ie=edge">    
<title>Document</title>    
<style>    
*{    
margin: 0;    
padding: 0;    
}    
.box{    
width: 300px;    
height: 300px;    
margin: 100px auto;    
position: relative;    
transform-style: preserve-3d;    
transform: rotateX(-30deg) rotateY(30deg);    
animation: updown 3s linear 3s infinite alternate;    
}    
@keyframes updown{    
0%{    
transform: rotateX(-30deg) rotateY(30deg);    
}    
100%{    
transform: rotateX(360deg) rotateY(360deg);    
}    
}    
ul{    
list-style: none;    
}    
.box li{    
width: 100px;    
height: 100px;    
border: 2px solid #fff;    
box-sizing: border-box;    
float: left;    
position: relative;    
}    
.box>div{    
position: absolute;    
width: 100%;    
height: 100%;    
opacity: 0.5    
}    
.box .front{    
/*background-color: deeppink;*/    
transform: translateZ(150px);    
}    
.box .behind{    
/*background-color: yellow;*/    
transform: translateZ(-150px);    
}    
.box .left{    
/*background-color: greenyellow;*/    
transform: rotateY(-90deg) translateZ(150px);    
}    
.box .right{    
/*background-color: red;*/    
transform: rotateY(90deg) translateZ(150px);    
}    
.box .top{    
/*background-color: deepskyblue;*/    
transform: rotateX(90deg) translateZ(150px);    
}    
.box .bottom{    
/*background-color: purple;*/    
transform: rotateX(-90deg) translateZ(150px);    
}    
</style>    
</head>    
<body>    
<div>    
<div></div>    
<div></div>    
<div></div>    
<div></div>    
<div></div>    
<div></div>    
</div>    
<script src="jquery.js"></script>    
<script>    
var box = $(".box");    
var divs = box.children();    
var lisColor = [&#39;deeppink&#39;,&#39;yellow&#39;,&#39;greenyellow&#39;,&#39;red&#39;,&#39;deepskyblue&#39;,&#39;purple&#39;]    
divs.each(function(index,el){    
var ul = $("<ul></ul>");    
for(var i = 0; i < 9; i++){    
var li = $("<li></li>");    
li.css({"backgroundColor":lisColor[index]});    
ul.append(li);    
}    
$(el).append(ul);    
});    
var lisPosition = [];    
for(var i = 0; i < 54; i++){    
lisPosition.push(parseInt(Math.random()*350));    
}    
$(&#39;li&#39;).each(function(index,el){    
$(el).css({&#39;left&#39;:lisPosition[index],"top":lisPosition[index]});    
})    
$(&#39;li&#39;).each(function(index,el){    
$(el).animate({&#39;left&#39;:0,"top":0},3000);    
})    
</script>    
</body>    
</html>

Recommandations associées :

Comment utiliser du CSS pur pour implémenter une main en mouvement (code source ci-joint)

Comment utilisez Pure CSS pour obtenir l'effet d'une paire de ciseaux (code source ci-joint)

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：Premier contact avec les variables CSSArticle suivant：Premier contact avec les variables CSS

Articles Liés

Voir plus