纯css实现3d相册

3d相册案例

效果图：

css样式如下：

@charset "utf—8";
* {
  margin: 0;
  padding: 0;
}

/* 设置html背景色 */

html {
  background: linear-gradient(#032861 0%, #000 80%);
  background: url(../img/preview.png);
  height: 100%;
  width: 100%;
  overflow: hidden;
}

/* 给星星设置样式 */

.wall {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
}

/* 让星星动起来 */

div#mindground {
  background: url("../img/midground.png");
  overflow: hidden;
  animation: dd 30s linear infinite;
}

div#foreground {
  background: url(../img/foreground.png);
  overflow: hidden;
  animation: dd 15s linear infinite;
}

@keyframes dd {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 500% 0;
  }
}

/* 给相册盒子设定大小 */

.wrap {
  height: 200px;
  width: 200px;
  margin: 2