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

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

Document

*{

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);

}

var box = $(".box");

var divs = box.children();

var lisColor = ['deeppink','yellow','greenyellow','red','deepskyblue','purple']

divs.each(function(index,el){

var ul = $("

for(var i = 0; i < 9; i++){

var 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);

})

相关推荐：