How to use css3 to achieve the animation effect of the Rubik's Cube (complete code)-CSS Tutorial-php.cn

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

不言

Release： 2018-09-11 17:33:00

Original

3222 people have browsed it

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>

Copy after login

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!