div+css实现许多图片围成一圈立体旋转动画效果代码-html代码-BFW代码库

div+css实现许多图片围成一圈立体旋转动画效果代码

代码语言：html

所属分类：动画

代码描述：div+css实现许多图片围成一圈立体旋转动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  


  
  
<style>
/**********/
/* BASICS */
/**********/

*, *::before, *::after {
	box-shadow:border-box;
}

body {
	margin:0;
}

/* alle kinderen hebben een index */
:nth-child(1) { --i:1; }
:nth-child(2) { --i:2; }
:nth-child(3) { --i:3; }
:nth-child(4) { --i:4; }
:nth-child(5) { --i:5; }
:nth-child(6) { --i:6; }
:nth-child(7) { --i:7; }
:nth-child(8) { --i:8; }
:nth-child(9) { --i:9; }
:nth-child(10) { --i:10; }




/**************/
/* DE SECTION */
/**************/

section {
	height:100dvh;
	
	/* de ul in het midden van de setting */
	display:grid;
	place-items:center;
	
	background-image:linear-gradient(black,midnightblue);
}




/**********************/
/* DE LIJST MET ITEMS */
/*   DE 3D OMGEVING   */
/**********************/

ul {
	/* settings voor de carrousel */
	/* die zou je allemaal met CSS kunnen animeren */
	/* en/of aanpassen met JS */
	
	--n:10; /* aantal items */
	
	--duration:40s;
	
	--caro-tiltZ:12deg;
	--caro-tiltX:4deg;
	
	--caro-max-radius:28em;
	--caro-radius:min( 40vw, var(--caro-max-radius) );
	--caro-omtrek:calc( 2 * pi * var(--caro-radius) );
	
	/* maat van item berekenen adhv aantal items en omtrek */
	--item-size-bruto:calc( var(--caro-omtrek) / var(--n) );
	/* rekening houden met spacing */
	--item-spacing:.5; /* .5 voor helft van een item */
	--item-size-netto:calc( var(--item-size-bruto) / (1 + var(--item-spacing)) );
	
	--item-tiltX:12deg;
	
	/* basics */
	margin:0;
	padding:0;
	list-style-type:"";
	
	/* om de li's op elkaar in 1 gridcel te zetten */
	display:grid;
	
	/* 3D omgeving */
	perspective:100vw;
	transform-style:preserve-3d;
}




/************/
/* EEN ITEM */
/************/

li {
	/* delay berekenen op basis van aantal items en duration */
	--delay:calc( var(--duration) / var(--n) * var(--i) - var(--duration) );
	
	/* alle li's staan op elkaar in de eerste (dezelfde) gridcel */
	/* dan kunnen ze van daaruit animeren */
	grid-area:1/1;
	
	w.........完整代码请登录后点击上方下载按钮下载查看