Web Front-endCSS TutorialHow to use css3 to achieve the animation effect of the Rubik's Cube (complete code)
The content of this article is about how to use css3 to realize the animation effect of the Rubik's Cube (complete code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
<!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>Related recommendations:
How to use pure CSS to implement a moving hand (source code attached)
How to use pure CSS Realize the effect of a pair of scissors (source code attached)
The above is the detailed content of How to use css3 to achieve the animation effect of the Rubik's Cube (complete code). For more information, please follow other related articles on the PHP Chinese website!
实战：vscode中开发一个支持vue文件跳转到定义的插件Nov 16, 2022 pm 08:43 PMvscode自身是支持vue文件组件跳转到定义的，但是支持的力度是非常弱的。我们在vue-cli的配置的下，可以写很多灵活的用法，这样可以提升我们的生产效率。但是正是这些灵活的写法，导致了vscode自身提供的功能无法支持跳转到文件定义。为了兼容这些灵活的写法，提高工作效率，所以写了一个vscode支持vue文件跳转到定义的插件。
5个常见的JavaScript内存错误Aug 25, 2022 am 10:27 AMJavaScript 不提供任何内存管理操作。相反，内存由 JavaScript VM 通过内存回收过程管理，该过程称为垃圾收集。
Node.js 19正式发布，聊聊它的 6 大特性！Nov 16, 2022 pm 08:34 PMNode 19已正式发布，下面本篇文章就来带大家详解了解一下Node.js 19的 6 大特性，希望对大家有所帮助！
聊聊如何选择一个最好的Node.js Docker镜像？Dec 13, 2022 pm 08:00 PM选择一个Node的Docker镜像看起来像是一件小事，但是镜像的大小和潜在漏洞可能会对你的CI/CD流程和安全造成重大的影响。那我们如何选择一个最好Node.js Docker镜像呢？
【6大类】实用的前端处理文件的工具库，快来收藏吧！Jul 15, 2022 pm 02:58 PM本篇文章给大家整理和分享几个前端文件处理相关的实用工具库，共分成6大类一一介绍给大家，希望对大家有所帮助。
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software
Atom editor mac version download
The most popular open source editor
SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.
Dreamweaver Mac version
Visual web development tools
Zend Studio 13.0.1
Powerful PHP integrated development environment
