效果如图:
<!DOCTYPE html>
<html lang="en">
<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>loading动画加载</title>
<style>
@keyframes rotate{
from {
transform: rotateX(30deg) rotateY(-30deg);
left: 0;
}
to {
transform: rotateX(500deg) rotateY(-500deg);
left: 500px;
}
}
.cube{width: 300px;height: 300px;margin: 100px;transform-style: preserve-3d;position: relative;transform: rotateX(20deg) rotateY(50deg);animation-name: rotate;animation-duration: 5s;animation-iteration-count: infinite;animation-direction: alternate;}
.cube .face{width: 100%;height: 100%;line-height: 300px;text-align: center;font-size: 50px;position: absolute;left: 0;top: 0;opacity: .5;}
.cube .face1{transform: rotateX(90deg) translateZ(150px);background: red;}
.cube .face2{transform: rotateX(90deg) translateZ(-150px);background: green;}
.cube .face3{transform: rotateY(90deg) translateZ(-150px);background: purple;}
.cube .face4{transform: rotateY(90deg) translateZ(150px);background: blue;}
.cube .face.face5{transform: translateZ(-150px);background: pink;}
.cube .face.face6{transform: translateZ(150px);background: gold;}
</style>
</head>
<body>
<div class="cube">
<div class="face face1">1</div>
<div class="face face2">2</div>
<div class="face face3">3</div>
<div class="face face4">4</div>
<div class="face face5">5</div>
<div class="face face6">6</div>
</div>
</body>
</html>
注意:
transform-style: preserve-3d;使子元素保留3d位置
animation-name: rotate; 动画名称
animation-duration: 5s;动画执行时间
animation-iteration-count: infinite;动画执行次数
animation-direction: alternate; 动画执行完成后反向执行,使动画效果更流畅