最近看到了网站上有一个立方体动画，尝试着模仿了一下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>立方体动画</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<style>
body {
background: #607d8b!important;
}
@keyframes roll {
from {
transform: rotateX(-45deg) rotateY(45deg);
}
25% {
transform: rotateX(-45deg) rotateY(45deg);
}
100% {
transform: rotateX(-45deg) rotateY(405deg);
}
}
@keyframes translateZZ {
from {
transform: rotateY(90deg) translateZ(100px);
}
12.5% {
transform: rotateY(90deg) translateZ(200px);
}
25% {
transform: rotateY(90deg) translateZ(100px);
}
100% {
transform: rotateY(90deg) translateZ(100px);
}
}
@keyframes translateZX1 {
from {
transform: rotateX(90deg) translateZ(100px);
}
12.5% {
transform: rotateX(90deg) translateZ(200px);
}
25% {
transform: rotateX(90deg) translateZ(100px);
}
100% {
transform: rotateX(90deg) translateZ(100px);
}
}
@keyframes translateZX2 {
from {
transform: rotateX(90deg) translateZ(-100px);
}
12.5% {
transform: rotateX(90deg) translateZ(-200px);
}
25% {
transform: rotateX(90deg) translateZ(-100px);
}
100% {
transform: rotateX(90deg) translateZ(-100px);
}
}
@keyframes translateZZ1 {
from {
transform: translateZ(100px);
}
12.5% {
transform: translateZ(200px);
}
25% {
transform: translateZ(100px);
}
100% {
transform: translateZ(100px);
}
}
@keyframes translateZZ2 {
from {
transform: translateZ(-100px);
}
12.5% {
transform: translateZ(-200px);
}
25% {
transform: translateZ(-100px);
}
100% {
transform: translateZ(-100px);
}
}
@keyframes translateZZZ {
from {
transform: rotateY(90deg) translateZ(-100px);
}
12.5% {
transform: rotateY(90deg) translateZ(-200px);
}
25% {
transform: rotateY(90deg) translateZ(-100px);
}
100% {
transform: rotateY(90deg) translateZ(-100px);
}
}
.ddd {
animation: roll 4s linear infinite;
width: 200px;
height: 200px;
position: fixed;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
transform:rotateX(-45deg) rotateY(45deg);
transform-style: preserve-3d;
}
.mindiv {
position: absolute;
width: 200px;
height: 200px;
box-shadow: 0 0 10px rgba(0,0,0,.1);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
background: #448AFF;
background-size: 100% 100%;
top: 0;
left: 0;
opacity: .5;
border: 5px solid #333;
}
.main1{
transform: translateZ(100px);
animation: translateZZ1 4s linear infinite;
}
.main2{
transform: rotateX(90deg) translateZ(100px);
animation: translateZX1 4s linear infinite;
}
.main3{
transform: rotateX(90deg) translateZ(-100px);
animation: translateZX2 4s linear infinite;
}
.main4{
transform: rotateY(90deg) translateZ(100px);
animation: translateZZ 4s linear infinite;
}
.main5{
transform: rotateY(90deg) translateZ(-100px);
animation: translateZZZ 4s linear infinite;
}
.main6{
transform: translateZ(-100px);
animation: translateZZ2 4s linear infinite;
}
</style>
<body>
<div class="ddd">
<div class="mindiv main1"></div>
<div class="mindiv main2"></div>
<div class="mindiv main3"></div>
<div class="mindiv main4"></div>
<div class="mindiv main5"></div>
<div class="mindiv main6"></div>
</div>
</body>
<script>
</script>
</html>
