如何使用css3实现魔方的动画效果（完整代码）

来源：爱玩科技网

本篇文章给大家带来的内容是关于如何使用css3实现魔方的动画效果（完整代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

<!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 = ['deeppink','yellow','greenyellow','red','deepskyblue','purple'] 
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)); 
} 
$('li').each(function(index,el){ 
$(el).css({'left':lisPosition[index],"top":lisPosition[index]}); 
}) 
$('li').each(function(index,el){ 
$(el).animate({'left':0,"top":0},3000); 
}) 
</script> 
</body> 
</html>