CSS3를 사용하여 루빅스 큐브의 애니메이션 효과를 얻는 방법(전체 코드)-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS3를 사용하여 루빅스 큐브의 애니메이션 효과를 얻는 방법(전체 코드)

不言

Sep 11, 2018 pm 05:33 PM

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 = [&#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>

관련 기사

巧用CSS实现各种奇形怪状按钮（附代码）Jul 19, 2022 am 11:28 AM

本篇文章带大家看看怎么使用 CSS 轻松实现高频出现的各类奇形怪状按钮，希望对大家有所帮助！

实战：vscode中开发一个支持vue文件跳转到定义的插件Nov 16, 2022 pm 08:43 PM

vscode自身是支持vue文件组件跳转到定义的，但是支持的力度是非常弱的。我们在vue-cli的配置的下，可以写很多灵活的用法，这样可以提升我们的生产效率。但是正是这些灵活的写法，导致了vscode自身提供的功能无法支持跳转到文件定义。为了兼容这些灵活的写法，提高工作效率，所以写了一个vscode支持vue文件跳转到定义的插件。