js+css实现图片三维堆叠漂浮景深悬浮清晰效果代码-html代码-BFW代码库

js+css实现图片三维堆叠漂浮景深悬浮清晰效果代码

代码语言：html

所属分类：悬停

代码描述：js+css实现图片三维堆叠漂浮景深悬浮清晰效果代码，靠后面的模糊，悬浮悬浮图就会清晰。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  
  
  
<style>
.p-field-3d {
  position: relative;
  transform-style: preserve-3d;
  width: 100%;
  height: 100vh;
  animation: rotate 30s infinite;
}
.p-field-3d__item {
  position: absolute;
  left: 0;
  top: 0;
  transition: filter 0.8s;
  border-radius: 50%;
  overflow: hidden;
}

@keyframes rotate {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: rotateX(0deg) rotateY(8deg);
  }
  100% {
    transform: rotateX(0deg) rotateY(0deg);
  }
}
</style>



  
  
</head>

<body translate="no">
  <div class="p-field-3d">
</div>
  
      <script >
"use strict";
const maxItems = 20;
const fieldClass = '.p-field-3d';
const itemSize = 100;
const generateRandomPosition = () => {
    const screenWidth = window.innerWidth;
    const screenHeight = window.innerHeight;
    // Generate random x and y positions
    const x = Math.floor(Math.random() * (screenWidth - itemSize));
    const y = Math.floor(Math.random() * (screenHeight - itemSize));
    return { x, y };
};
const extractZValueFromTransform = (transformValue) => {
    const matrix = transformValue.match(/matrix.*\((.+)\)/);
    if (matrix) {
        const values = matrix[1].split(', ');
        if (values.length === 16) {
            // For matrix3d
            return parseFloat(values[14]);
        }
        else if (values.length === 6) {
            // For matrix (2D transform), z value is 0
            return 0;
        }
    }
    return null;
};
const render3dItems = () => {
    const field = document.qu.........完整代码请登录后点击上方下载按钮下载查看