Home > Article > Web Front-end > How to use css3 to achieve the animation effect of the Rubik's Cube (complete code)

How to use css3 to achieve the animation effect of the Rubik's Cube (complete code)

不言Original: 2018-09-11 17:33:003187browse

The content of this article is about how to use css3 to realize the animation effect of the Rubik's Cube (complete code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

<!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>

Related recommendations:

How to use pure CSS to implement a moving hand (source code attached)

How to use pure CSS Realize the effect of a pair of scissors (source code attached)

The above is the detailed content of How to use css3 to achieve the animation effect of the Rubik's Cube (complete code). For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：First contact with CSS variablesNext article：First contact with CSS variables

See more

How to use css3 to achieve the animation effect of the Rubik's Cube (complete code)

Related articles