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

程序员文章站 2022-04-04 09:42:04

...

本篇文章给大家带来的内容是关于如何使用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实现魔方的动画效果（完整代码）

CSS3实现银灰色动画效果的导航菜单代码

使用css3实现超炫的loading加载动画效果

8款使用 CSS3 实现超炫的 Loading（加载）的动画效果

使用JavaScript 实现时间轴与动画效果的示例代码(前端组件化)

CSS3 input框的实现代码类似Google登录的动画效果

使用CSS3实现超炫的Loading（加载）动画效果_html/css_WEB-ITnose

如何使广告只出现一次？JS使用cookie实现只出现一次的广告效果代码

单纯使用CSS来实现预加载的动画效果代码讲解

使用CSS3实现超炫的Loading（加载）动画效果_html/css_WEB-ITnose

使用CSS3实现的3D按钮精美效果代码