JQ 3D图层

下载代码

html

css

分享到微信朋友圈

html

css

/* Global */
body {
  height: 100vh;
  margin: 0;
  background: #000000;
  overflow: hidden;
}

/* Box */
.box {
  position: relative;
  height: 100%;
  top: 50%;
  left: 50%;
  perspective: 9999px;
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) rotateX(10deg);
  transition: 2s cubic-bezier(0.2, 0.9, 0.3, 1.3);
  /* Layers */
}
.box .layer {
  position: absolute;
  top: 50%;
  left: 50%;
  background: #FFFFFF;
  box-shadow: -4px -4px 10px 0px rgba(0, 0, 0, 0.4);
  animation: load 1.4s forwards;
  opacity: 0;
}

.layer:nth-child(1) {
  padding: 120px;
  transform: translate(-50%, -50%) rotateZ(180deg) translateZ(50px);
  border-radius: 15%;
  animation-delay: 0.2s;
}

.layer:nth-child(2) {
  padding: 105px;
  transform: translate(-50%, -50%) rotateZ(180deg) translateZ(80px);
  border-radius: 20%;
  animation-delay: 0.4s;
}

.layer:nth-child(3) {
  padding: 90px;
  transform: translate(-50%, -50%) rotateZ(180deg) translateZ(110px);
  border-radius: 25%;
  animation-delay: 0.6s;
}

.layer:nth-child(4) {
  padding: 75px;
  transform: translate(-50%, -50%) rotateZ(180deg) translateZ(140px);
  border-radius: 30%;
  animation-delay: 0.8s;
}

.layer:nth-child(5) {
  padding: 60px;
  transform: translate(-50%, -50%) rotateZ(180deg) translateZ(170px);
  border-radius: 35%;
  animation-delay: 1s;
}

.layer:nth-child(6) {
  padding: 45px;
  transform: translate(-50%, -50%) rotateZ(180deg) translateZ(200px);
  border-radius: 40%;
  animation-delay: 1.2s;
}

.layer:nth-child(7) {
  padding: 30px;
  transform: translate(-50%, -50%) rotateZ(180deg) translateZ(230px);
  border-radius: 45%;
  animation-delay: 1.4s;
}

.layer:nth-child(8) {
  padding: 15px;
  transform: translate(-50%, -50%) rotateZ(180deg) translateZ(260px);
  border-radius: 50%;
  animation-delay: 1.6s;
}

/* Load animation */
@keyframes load {
  to {
    opacity: .2;
  }
}

JavaScript

/*
===============================================================

Hi! Welcome to my little playground!

My name is Tobias Bogliolo. 'Open source' by default and always 'responsive',
I'm a publicist, visual designer and frontend developer based in Barcelona.

Here you will find some of my personal experiments. Sometimes usefull,
sometimes simply for fun. You are free to use them for whatever you want 
but I would appreciate an attribution from my work. I hope you enjoy it.

===============================================================
*/

//Throttle:
var throttleOn = false;
var actionLock = false;
var throttleTimer = 100;

//Tracking:
var threshold = 20;
var box = $(".box");

function translate(e){
  var xOrigin = box.width() / 2;
  var yOrigin = box.height() / 2;
  var xPivot = (e.clientY - yOrigin) / yOrigin * -threshold;
  var yPivot = (e.clientX - xOrigin) / xOrigin * threshold;
  box.css({
    'transform': 'translate(-50%, -50%) rotateX('+xPivot+'deg) rotateY('+yPivot+'deg)'
  });
};

//Handler:
$(window).mousemove(function(e){
  throttle(e);
});

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