Mosaica 3D css

下载代码

html

css

分享到微信朋友圈

html

<div class="mosaica">Mosaica</div>
<div class="container">
  <div id="plane1" class="plane">
    <div class="items">
      <div class="item" style="top: 0px; left: 0px; width: 250px; height: 150px; animation-delay: 1.04s;"> </div>
      <div class="item" style="top: 0px; left: 250px; width: 150px; height: 100px; animation-delay: 2.56s;"> </div>
      <div class="item" style="top: 0px; left: 400px; width: 100px; height: 150px; animation-delay: 2.36s;"> </div>
      <div class="item" style="top: 0px; left: 500px; width: 150px; height: 100px; animation-delay: 0.64s;"> </div>
      <div class="item" style="top: 0px; left: 650px; width: 100px; height: 150px; animation-delay: 1.28s;"> </div>
      <div class="item" style="top: 0px; left: 750px; width: 50px; height: 50px; animation-delay: 0.88s;"> </div>
      <div class="item" style="top: 0px; left: 800px; width: 100px; height: 50px; animation-delay: 0.44s;"> </div>
      <div class="item" style="top: 50px; left: 750px; width: 150px; height: 100px; animation-delay: 0.76s;"> </div>
      <div class="item" style="top: 100px; left: 250px; width: 150px; height: 100px; animation-delay: 1.4s;"> </div>
      <div class="item" style="top: 100px; left: 500px; width: 150px; height: 100px; animation-delay: 0.56s;"> </div>
      <div class="item" style="top: 150px; left: 0px; width: 100px; height: 100px; animation-delay: 2.12s;"> </div>
      <div class="item" style="top: 150px; left: 100px; width: 100px; height: 100px; animation-delay: 0.36s;"> </div>
      <div class="item" style="top: 150px; left: 200px; width: 50px; height: 50px; animation-delay: 2.44s;"> </div>
      <div class="item" style="top: 150px; left: 400px; width: 100px; height: 150px; animation-delay: 2.32s;"> </div>
      <div class="item" style="top: 150px; left: 650px; width: 100px; height: 150px; animation-delay: 1.8s;"> </div>
      <div class="item" style="top: 150px; left: 750px; width: 150px; height: 100px; animation-delay: 1.08s;"> </div>
      <div class="item" style="top: 200px; left: 200px; width: 50px; height: 50px; animation-delay: 0.08s;"> </div>
      <div class="item" style="top: 200px; left: 250px; width: 50px; height: 50px; animation-delay: 0s;"> </div>
      <div class="item" style="top: 200px; left: 300px; width: 100px; height: 100px; animation-delay: 1.48s;"> </div>
      <div class="item" style="top: 200px; left: 500px; width: 100px; height: 100px; animation-delay: 1.64s;"> </div>
      <div class="item" style="top: 200px; left: 600px; width: 50px; height: 50px; animation-delay: 0.48s;"> </div>
      <div class="item" style="top: 250px; left: 0px; width: 50px; height: 100px; animation-delay: 0.68s;"> </div>
      <div class="item" style="top: 250px; left: 50px; width: 100px; height: 150px; animation-delay: 2.16s;"> </div>
      <div class="item" style="top: 250px; left: 150px; width: 100px; height: 150px; animation-delay: 2.48s;"> </div>
      <div class="item" style="top: 250px; left: 250px; width: 50px; height: 50px; animation-delay: 0.52s;"> </div>
      <div class="item" style="top: 250px; left: 600px; width: 50px; height: 50px; animation-delay: 2s;"> </div>
      <div class="item" style="top: 250px; left: 750px; width: 150px; height: 100px; animation-delay: 1.16s;"> </div>
      <div class="item" style="top: 300px; left: 250px; width: 150px; height: 150px; animation-delay: 0.24s;"> </div>
      <div class="item" style="top: 300px; left: 400px; width: 50px; height: 50px; animation-delay: 2.6s;"> </div>
      <div class="item" style="top: 300px; left: 450px; width: 50px; height: 100px; animation-delay: 2.2s;"> </div>
      <div class="item" style="top: 300px; left: 500px; width: 150px; height: 100px; animation-delay: 1s;"> </div>
      <div class="item" style="top: 300px; left: 650px; width: 100px; height: 150px; animation-delay: 1.96s;"> </div>
      <div class="item" style="top: 350px; left: 0px; width: 50px; height: 50px; animation-delay: 1.76s;"> </div>
      <div class="item" style="top: 350px; left: 400px; width: 50px; height: 100px; animation-delay: 0.28s;"> </div>
      <div class="item" style="top: 350px; left: 750px; width: 150px; height: 100px; animation-delay: 2.04s;"> </div>
      <div class="item" style="top: 400px; left: 0px; width: 100px; height: 50px; animation-delay: 0.12s;"> </div>
      <div class="item" style="top: 400px; left: 100px; width: 150px; height: 100px; animation-delay: 1.72s;"> </div>
      <div class="item" style="top: 400px; left: 450px; width: 100px; height: 50px; animation-delay: 2.28s;"> </div>
      <div class="item" style="top: 400px; left: 550px; width: 100px; height: 50px; animation-delay: 1.32s;"> </div>
      <div class="item" style="top: 450px; left: 0px; width: 100px; height: 100px; animation-delay: 1.92s;"> </div>
      <div class="item" style="top: 450px; left: 250px; width: 100px; height: 100px; animation-delay: 1.52s;"> </div>
      <div class="item" style="top: 450px; left: 350px; width: 100px; height: 100px; animation-delay: 0.72s;"> </div>
      <div class="item" style="top: 450px; left: 450px; width: 100px; height: 100px; animation-delay: 0.16s;"> </div>
      <div class="item" style="top: 450px; left: 550px; width: 100px; height: 100px; animation-delay: 0.32s;"> </div>
      <div class="item" style="top: 450px; left: 650px; width: 150px; height: 100px; animation-delay: 0.84s;"> </div>
      <div class="item" style="top: 450px; left: 800px; width: 50px; height: 50px; animation-delay: 0.8s;"> </div>
      <div class="item" style="top: 450px; left: 850px; width: 50px; height: 100px; animation-delay: 2.24s;"> </div>
      <div class="item" style="top: 500px; left: 100px; width: 50px; height: 50px; animation-delay: 1.2s;"> </div>
      <div class="item" style="top: 500px; left: 150px; width: 50px; height: 50px; animation-delay: 0.92s;"> </div>
      <div class="item" style="top: 500px; left: 200px; width: 50px; height: 50px; animation-delay: 1.6s;"> </div>
      <div class="item" style="top: 500px; left: 800px; width: 50px; height: 50px; animation-delay: 0.04s;"> </div>
      <div class="item" style="top: 550px; left: 0px; width: 50px; height: 50px; animation-delay: 1.44s;"> </div>
      <div class="item" style="top: 550px; left: 50px; width: 100px; height: 50px; animation-delay: 1.24s;"> </div>
      <div class="item" style="top: 550px; left: 150px; width: 150px; height: 100px; animation-delay: 1.88s;"> </div>
      <div class="item" style="top: 550px; left: 300px; width: 100px; height: 150px; animation-delay: 0.4s;"> </div>
      <div class="item" style="top: 550px; left: 400px; width: 50px; height: 50px; animation-delay: 0.2s;"> </div>
      <div class="item" style="top: 550px; left: 450px; width: 150px; height: 150px; animation-delay: 1.12s;"> </div>
      <div class="item" style="top: 550px; left: 600px; width: 150px; height: 100px; animation-delay: 1.56s;"> </div>
      <div class="item" style="top: 550px; left: 750px; width: 150px; height: 150px; animation-delay: 1.36s;"> </div>
      <div class="item" style="top: 600px; left: 0px; width: 150px; height: 100px; animation-delay: 2.4s;"> </div>
      <div class="item" style="top: 600px; left: 400px; width: 50px; height: 100px; animation-delay: 0.6s;"> </div>
      <div class="item" style="top: 650px; left: 150px; width: 50px; height: 50px; animation-delay: 1.84s;"> </div>
      <div class="item" style="top: 650px; left: 200px; width: 50px; height: 50px; animation-delay: 2.52s;"> </div>
      <div class="item" style="top: 650px; left: 250px; width: 50px; height: 50px; animation-delay: 1.68s;"> </div>
      <div class="item" style="top: 650px; left: 600px; width: 50px; height: 50px; animation-delay: 0.96s;"> </div>
      <div class="item" style="top: 650px; left: 650px; width: 100px; height: 50px; animation-delay: 2.08s;"> </div>
    </div>
  </div>
</div>

css

@import url("https://fonts.googleapis.com/css?family=Montserrat:200");
* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  background: #212121;
  overflow: hidden;
}

.mosaica {
  position: fixed;
  left: 2px;
  bottom: 2px;
  padding: 4px 6px;
  color: #FFFFFF;
  font-family: "Montserrat";
  font-size: 11px;
  letter-spacing: 0.06em;
}

.container {
  position: absolute;
  width: 0;
  height: 0;
  left: 50%;
  top: 50%;
  perspective: 1200px;
  transform-origin: center center;
  cursor: move;
}

.plane {
  position: absolute;
  display: block;
  width: 900px;
  height: 700px;
  border: 0;
  margin: -350px 0 0 -450px;
  transform-style: preserve-3d;
}
.plane:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 100%;
  z-index: -1;
  transform: translateZ(-1px);
}

.items {
  position: relative;
  background: red;
  transform-style: preserve-3d;
}

.item {
  background-color: #3B93EA;
  position: absolute;
  overflow: hidden;
  border: 1px solid #2785db;
}

@keyframes animate {
  0% {
    transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1);
    transform-origin: 50% 50% 0;
    opacity: 1;
  }
  100% {
    transform: translate3d(0px, 0px, 1200px) rotateX(180deg) rotateY(360deg) rotateZ(180deg) scale3d(0, 0, 0);
    transform-origin: 50% 50% 0;
    opacity: 1;
  }
}
.item.animate {
  transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1);
  transform-origin: 50% 50% 0;
  animation: animate 3s forwards;
}

JavaScript

class Orbit {
  constructor(target, dumping=10, from={ x: 0, y: 0 }, to={ x: 0, y: 0 }) {
    this.__target = target
    this.dumping = dumping;
    this.desire_rotateZ = -to.y;
    this.desire_rotateX = -to.x;
    this.rz = from.y;
    this.rx = from.x;
    this.isDragging = false;
    this.previousMousePosition = {
      x: 0,
      y: 0
    };
    this.behaviours();
  }
  
  behaviours(){
    $(document).on("mousedown", this.handleDown.bind(this))
    $(document).on("mouseup",   this.handleUp.bind(this))
    $(document).on("mousemove", this.handleMove.bind(this))
    window.requestAnimationFrame(this.update.bind(this));
  }
  
  handleDown(e){
    this.isDragging = true;
    if( !this.firstDrag ){
      this.previousMousePosition = {
        x: e.pageX,
        y: e.pageY
      }
      this.firstDrag = true;
    }
  }
   
  handleUp(e){
    this.isDragging = false;
  }
   
  handleMove(e){
    let deltaMove = {
        x: e.pageX-this.previousMousePosition.x,
        y: e.pageY-this.previousMousePosition.y
    };
  
    if(this.isDragging){
      this.desire_rotateZ += deltaMove.x;
      this.desire_rotateX += deltaMove.y;
    }
    
    this.previousMousePosition = {
          x: e.pageX,
          y: e.pageY
    };
  }

rotation(x, y){
    this.desire_rotateZ = x;
    this.desire_rotateX = y;
  }
  
  update(){
    this.rz += (( (this.desire_rotateZ*-1) - this.rz) / this.dumping);
    this.rx += (( (this.desire_rotateX*-1) - this.rx) / this.dumping);
    this.__target.css({
      "transform": "translateZ(-300px) rotateX("+this.rx+"deg) rotateZ("+this.rz+"deg)"
    })
    window.requestAnimationFrame(this.update.bind(this));
  }
}

let orbit1 = new Orbit( $("#plane1"), 40, { x: 0,  y: 0 }, { x: 40, y: 30 } )

function animate(){
  $(".item").removeClass("animate")
  setTimeout(function(){
    $(".item").addClass("animate")
  }, 250)
  setTimeout(animate, 6000);
}

animate()

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg