Css 3D倾斜鼠标跟随

下载代码

html

css

分享到微信朋友圈

html

css

*,
*::before,
*::after {
  box-sizing: border-box;
  position: relative;
}

:root {
  --duration: .4s;
  --easing: cubic-bezier(.7, 0, .2, 1);
}

html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  background-color: #000;
  overflow: hidden;
}

#app {
  display: flex;
  height: 100%;
  width: 100%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 801px;
          perspective: 801px;
  -webkit-perspective-origin: center center;
          perspective-origin: center center;
}
#app > * {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.tiles {
  margin: auto;
  width: 90vmin;
  height: 55vmin;
  display: grid;
  grid-template: 1fr 1fr / 1fr 1fr;
  grid-gap: 5vmin;
  -webkit-transform: translateZ(-100px) rotateX(50deg);
          transform: translateZ(-100px) rotateX(50deg);
}

.tile {
  opacity: 0.99;
  display: grid;
  grid-template: 50% 50% / 50% 50%;
  padding: 1em;
  background: #555 radial-gradient(circle at top center, rgba(255, 255, 255, 0.8), transparent);
  transition: background-color var(--duration) linear, -webkit-transform var(--duration) var(--easing);
  transition: transform var(--duration) var(--easing), background-color var(--duration) linear;
  transition: transform var(--duration) var(--easing), background-color var(--duration) linear, -webkit-transform var(--duration) var(--easing);
}
.tile > header {
  grid-column: 2;
  grid-row: 2 / 3;
  font-size: 2vmin;
  font-weight: bold;
  color: white;
  transition: inherit;
  transition-property: color, opacity, -webkit-transform;
  transition-property: transform, color, opacity;
  transition-property: transform, color, opacity, -webkit-transform;
  text-shadow: 0 0.25vmin 1vmin rgba(0, 0, 0, 0.15);
  white-space: nowrap;
  display: flex;
  justify-content: flex-end;
}
.tile > header:after {
  content: '';
  display: inline-block;
  top: .5em;
  height: 1px;
  width: 40%;
  margin-left: 2em;
  background-color: rgba(255, 255, 255, 0.3);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  transition: inherit;
}
.tile::before {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50%;
  font-size: 22vmin;
  opacity: .2;
  font-weight: bold;
  -webkit-transform: scale(0.6);
          transform: scale(0.6);
  -webkit-transform-origin: 50% 0%;
          transform-origin: 50% 0%;
  align-self: flex-end;
  transition: inherit;
}

.tiles {
  counter-reset: tileCounter;
}

.tile {
  counter-increment: tileCounter;
}

.tile::before {
  content: counter(tileCounter,decimal-leading-zero);
}

.tile:hover {
  background-color: var(--color, green);
  -webkit-transform: translateZ(20px);
          transform: translateZ(20px);
}
.tile:hover::before {
  -webkit-transform: translateX(-50%) scale(1);
          transform: translateX(-50%) scale(1);
}
.tile:hover header {
  -webkit-transform: translate(50%, -100%);
          transform: translate(50%, -100%);
  color: #000;
  opacity: 0.4;
}
.tile:hover header::after {
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
}

/* ---------------------------------- */
.tiles {
  -webkit-transform: rotateX(calc(-15deg * var(--rot-x,0))) rotateY(calc(-15deg * var(--rot-y,0)));
          transform: rotateX(calc(-15deg * var(--rot-x,0))) rotateY(calc(-15deg * var(--rot-y,0)));
}

/* ---------------------------------- */
.mouser {
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 2vmin;
  height: 2vmin;
  border-radius: 50%;
  background: #FFF;
  z-index: 999;
  -webkit-transform: translate(calc(1px * var(--mouse-x, 50vw)), calc(1px * var(--mouse-y, 50vh))) translate(-50%, -50%);
          transform: translate(calc(1px * var(--mouse-x, 50vw)), calc(1px * var(--mouse-y, 50vh))) translate(-50%, -50%);
}
.mouser:before {
  content: '';
  position: absolute;
  border-radius: inherit;
  background: inherit;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(calc(1 + var(--over)));
          transform: scale(calc(1 + var(--over)));
  transition: -webkit-transform 0.2s var(--easing);
  transition: transform 0.2s var(--easing);
  transition: transform 0.2s var(--easing), -webkit-transform 0.2s var(--easing);
}

JavaScript

console.clear();

const tileEls = document.querySelectorAll('.tile');

let x = 0;
let y = 0;
let currX = 0;
let currY = 0;

document.addEventListener('mousemove', event => {
  let e = event.touches ? event.touches[0] : event;
  x = e.clientX;
  y = e.clientY;
});

Array.from(tileEls).forEach(tileEl => {
  tileEl.addEventListener('mousemove', () => {
    document.body.style.setProperty('--over', 1);
  });

tileEl.addEventListener('mouseout', () => {
    document.body.style.setProperty('--over', 0);
  });
});

function update() {
  requestAnimationFrame(() => {
    currX = currX + (x - currX) * .15;
    currY = currY + (y - currY) * .15;
    const { innerWidth, innerHeight } = window;
    const rotX = currY / innerHeight * -2 + 1;
    const rotY = currX / innerWidth * 2 - 1;

document.body.style.setProperty('--mouse-x', currX);
    document.body.style.setProperty('--mouse-y', currY);
    document.body.style.setProperty('--rot-x', rotX);
    document.body.style.setProperty('--rot-y', rotY);

update();
  });
}

update();

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