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 */
        --it.........完整代码请登录后点击上方下载按钮下载查看