.scene
  .world
    a.plane
      img(src="https://images.unsplash.com/photo-1548783352-782f2ad6bedc?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80")
    a.plane
      img(src="https://images.unsplash.com/photo-1527598047660-c8172a715d86?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60")
    a.plane
      img(src="https://images.unsplash.com/photo-1513682121497-80211f36a7d3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60")
View Compiled
body {
  display:grid;
  justify-content:center;
  align-content:center;
  min-height:100vh;
}

.scene {
  width:50vmin; 
  height:50vmin; 
  perspective:800px;
  transform-style:preserve-3d;
}

.world {
  position:relative; 
  width:100%; 
  height:100%;
  transform-style:preserve-3d;
}

.plane {
  position:absolute;
  display:block; width:100%; height:100%;
  overflow:hidden;
}

.plane img {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  display:block; max-height:100%; max-width:100%;
}

.plane:nth-of-type(1) {
  transform:rotate3d(0,1,1,-35deg);
  animation:a1 10s infinite both;
  @keyframes a1 {
    from, to, 5%, 35% {opacity:0}
    10%, 30% {opacity:1}
  }
}
.plane:nth-of-type(2) {
  transform:rotate3d(1,1,0,-135deg);
  animation:a2 10s infinite both;
  @keyframes a2 {
    from, to, 35%, 65% {opacity:0}
    40%, 60% {opacity:1}
  }
}
.plane:nth-of-type(3) {
  transform:rotate3d(1,0,1,-45deg);
  animation:a3 10s infinite both;
  @keyframes a3 {
    from, to, 65%, 95% {opacity:0}
    70%, 90% {opacity:1}
  }
}

.world {
  animation:f 10s infinite;
  @keyframes f {
    0%,100% {transform:rotate3d(0,0,0,0deg)}
    10%,30% {transform:rotate3d(0,1,1,35deg)}
    40%,60% {transform:rotate3d(1,1,0,135deg)}
    70%,90% {transform:rotate3d(1,0,1,45deg)}
  }
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.