css实现鼠标滚动驱动三维立体图片相册围成圈圈悬浮翻转效果代码-html代码-BFW代码库

css实现鼠标滚动驱动三维立体图片相册围成圈圈悬浮翻转效果代码

代码语言：html

代码描述：css实现鼠标滚动驱动三维立体图片相册围成圈圈悬浮翻转效果代码

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

<!DOCTYPE html>
<html lang="en" style="--n: 18">
<head>
  <meta charset="UTF-8">
  

  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@500&family=Saira:ital@0;1&family=Sour+Gummy:wdth,wght@125,300&display=swap" rel="stylesheet">
  
  
  
<style>
@property --k {
	syntax: '<number>';
	initial-value: -1;
	inherits: true
}

@property --ang {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false
}

* { margin: 0 }

html {
	scrollbar-width: none;
	height: calc(var(--n)*100%)
}

body, header, main, section, 
article, figure { display: grid }

body {
	--dir: 0;
	grid-template-rows: max-content 1fr max-content;
	position: fixed;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	color: #dedede;
	font: clamp(.625em, 3vmin, 1.5em)/ 1.25 saira, sans-serif;
	animation: k 1s linear;
	animation-timeline: scroll();
	
	&::before {
		position: absolute;
		inset: 0;
		z-index: -1;
		background: #000;
		filter: url(#grain);
		content: ''
	}
	
	@media (max-aspect-ratio: 2/ 3) { --dir: 1 }
}

@keyframes k { to { --k: 1 } }

svg[height='0'][aria-hidden='true'] { position: fixed }

header {
	place-content: center;
	place-items: center;
	padding: .5em;
	text-align: center;
	text-wrap: balance
}

em { max-width: 32em }

main {
	overflow: hidden;
	perspective: 50em
}

section, article { transform-style: preserve-3d }

section {
	--r: calc(2 + var(--dir))/ 3;
	--w: clamp(4em, min(50vh, 25vw), 18em);
	--z: calc(var(--f, 1.25)*-.5*var(--w)/tan(.5turn/var(--n)));
	place-self: center;
	translate: 0 0 var(--z);
	rotate: var(--dir) calc(1 - var(--dir)) 0 calc((var(--k) + .5)*-1turn);
}

article, header, figure, img, figcaption { grid-area: 1/ 1 }

article {
	/* item progress value */
	--j: var(--i)/var(--n);
	/* linear difference between this item's progress value  
	 * and progress value of highlighted item in front - 
	 * it's a value in the [0, 1] interval */
	--dif-lin: calc(var(--j) - mod(var(--k) + 1, 1));
	/* absolute value of linear difference */
	--abs-lin: abs(var(--dif-lin));
	/* difference between middle & absolute linear difference */
	--dif-mid: calc(.5 - var(--abs-lin));
	--abs-mid: abs(var(--dif-mid));
	/* relative distance to from this item 
	 * to highlighted one in front */
	--dif-arc: calc(2*(.5 - var(--abs-mid)));
	/* relative distance limit */
	--lim: .35;
	--sel: max(0, calc((var(--lim) - var(--dif-arc))/var(--lim)));
	--out: calc(1 - var(--sel));
	--hov: 0;
	width: var(--w);
	aspect-ratio: var(--r);
	transform: 
		rotate3d(var(--dir), calc(1 - var(--dir)), 0, calc(var(--j)*1turn))
		translatez(var(--z))
		rotate(calc(var(--dir)*.5turn));
	
	header { rotate: y calc((1 + var(--hov))*.5turn) }
	
	&:hover, &:focus-within { --hov: round(var(--sel)) }
	
	@supports not (scale: abs(-1)) {
		--abs-lin: max(var(--dif-lin), -1*var(--dif-lin));
		--abs-mid: max(var(--dif-mid), -1*var(--dif-mid))
	}
}

article header, figure {
	--ang: calc(-45deg + var(--hov)*1.........完整代码请登录后点击上方下载按钮下载查看