css3 3D立方体流星动画特效

css代码

*{
  padding:0;
  margin: 0;
}
html{
  background:linear-gradient(#032861 0%,#000000 80%);
  height: 100%;  
  width: 100%;
  overflow: hidden;
}

/*满天星*/
.wall{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
}
div#midground{
    background: url("../img/midground.png");
   /* z-index:1;*/ overflow: hidden;
    animation: cc 20s linear infinite;
}
div#foreground{
    background: url("../img/foreground.png"); overflow: hidden;
    /* z-index:2; */
    animation: cc 10s linear infinite;
}

@keyframes cc {
    0%{
        background-position: 0 0;
    }
    100%{
        background-position: 1000% 0;
    }
}


.wrap{
  height: 200px;
  width: 200px;
  margin: 250px auto;
  position: relative;
  perspective:2000px;
  /*实现3d效果*/
  transform-style:preserve-3d; /* 表示所有子元素在3D空间中呈现。*/
  transform:rotateX(20deg) rotateY(30deg); /*定义转换，只是用 X 轴的值。   定义转换，只是用 Y 轴的值。*/
  transform-origin: 50% 50% 0; /*单独100px也行*/
  animation:move 4s linear infinite;
  /*  linear:每一步的距离和前一步都是相同的，也就是等速
  若不加linear，那会默认速度会加快然后最后一点距离再减速 */
}
/*大正方形样式*/
.wrap .box{
  position: absolute;
  width: 200px;
   height: 200px;
   opacity: 0.8;
  transition: 2s;
}
/* translateZ(z)  定义 3D 转换，只是用 Z 轴的值。*/
/* scaleY(y)   通过设置 Y 轴的值来定义缩放转换。*/
.wrap>img:nth-child(1){
transform: rotateY(0deg) translateZ(100px);
}
.wrap>img:nth-child(2){
transform: translateZ(-100px) rotateY(180deg);
}
.wrap>img:nth-child(3){
transform: rotateY(90deg) translateZ(100px);
}
.wrap>img:nth-child(4){
transform: rotateY(-90deg) translateZ(100px);
}
.wrap>img:nth-child(5){
transform: rotateX(90deg) translateZ(100px);
}
.wrap>img:nth-child(6){
transform: rotateX(-90deg) translateZ(100px);
}
/*小正方形*/
.wrap .square {
  display: bloack;
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50px;
   top:50px;
}
.wrap>img:nth-child(7){
transform: rotateY(0deg) translateZ(50px);
}
.wrap>img:nth-child(8){
transform: translateZ(-50px) rotateY(180deg);
}
.wrap>img:nth-child(9){
transform: rotateY(90deg) translateZ(50px);
}
.wrap>img:nth-child(10){
transform: rotateY(-90deg) translateZ(50px);
}
.wrap>img:nth-child(11){
transform: rotateX(90deg) translateZ(50px);
}
.wrap>img:nth-child(12){
transform: rotateX(-90deg) translateZ(50px);
}
@-webkit-keyframes move{
/* from{transform: rotateX(0deg) rotateY(0deg);}
to{transform: rotateX(360deg) rotateY(360deg);} */
/* 上面和下面是一样的 */
0%{
  transform: rotateX(0deg) rotateY(0deg);
}
100%{
  transform: rotateX(360deg) rotateY(360deg);
}
}
/* cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状 */
.wrap:hover{
cursor:pointer;
}
.wrap:hover>img:nth-child(1){
transform: rotateY(0deg) translateZ(200px);
}
.wrap:hover>img:nth-child(2){
transform: translateZ(-200px) rotateY(180deg);
}
.wrap:hover>img:nth-child(3){
transform: rotateY(90deg) translateZ(200px);
}
.wrap:hover>img:nth-child(4){
transform: rotateY(-90deg) translateZ(200px);
}
.wrap:hover>img:nth-child(5){
transform: rotateX(90deg) translateZ(200px);
}
.wrap:hover>img:nth-child(6){
transform: rotateX(-90deg) translateZ(200px);
}

html代码，将照片换成对应的url即可

<div id="midground" class="wall"></div> 
<div id="foreground" class="wall"></div> 

<div class="wrap">

  <img src="images/a.jpg" alt="" class="box">
  <img src="images/b.jpg" alt="" class="box">
  <img src="images/c.jpg" alt="" class="box">
  <img src="images/d.jpg" alt="" class="box">
  <img src="images/e.jpg" alt="" class="box">
  <img src="images/g.jpg" alt="" class="box"> 

  <img src="images/h.jpg" alt="" class="square ">
  <img src="images/i.jpg" alt="" class="square ">
  <img src="images/j.jpg" alt="" class="square ">
  <img src="images/k.jpg" alt="" class="square "> 
  <img src="images/l.jpg" alt="" class="square ">
  <img src="images/f.jpg" alt="" class="square ">

</div>