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

网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。

本篇文章给大家带来的内容是关于如何使用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>

以上就是如何使用css3实现魔方的动画效果（完整代码）的详细内容，更多请关注php中文网其它相关文章！