css实现三维3D像素网格旋转动画效果代码-html代码-BFW代码库

css实现三维3D像素网格旋转动画效果代码

代码语言：html

所属分类：三维

代码描述：css实现三维3D像素网格旋转动画效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box }
body { height: 100vh; display: grid; place-items: center; background-color: #1D1E22 }

/* scene set-up */
[scene], [rotation], [center-z] { display: grid }
[scene] :not(:empty) { transform-style: preserve-3d }
[scene] { width: var(--size); perspective: calc(var(--size) * 2); aspect-ratio: 1 }

/* rotate/animate scene  */
[rotation][animate="true"] { animation: rotateScene 10s linear infinite }
@keyframes rotateScene{ to { transform: rotateY(360deg) } }

/* position contents to z-center */
[center-z] { transform: translateZ(calc(var(--size) * .5)) }

/* grid */
[grid] { 
  display: grid;
  grid-template-columns: repeat(var(--dimension), 1fr);
  grid-template-rows: repeat(var(--dimension), 1fr);
}

/* pixel */
[pixel] {
  --pixel-size: calc(var(--size) / var(--dimension));
  grid-row: calc(var(--dimension) - var(--y) + 1); 
  grid-column: var(--x); 
  transform: translateZ(calc(var(--pixel-size) * (var(--z) - 1) * -1));
  background-color: var(--color);
}
/* sides set up */
[pixel], [pixel] > span { display: grid }
[pixel] > span { background-color: inherit; transform-style: preserve-3d }
[pixel]::before, [pixel]::after, [pixel] > span::before, [pixel] > span::after { content: ""; background-color: inherit }
[pixel]::before, [pixel]::after, [pixel] > span, [pixel] > span::before, [pixel] > span::after { grid-column: 1; grid-row: 1 }

/*sides orientation*/
[pixel]::before { transform-origin: left; transform: rotateY(90deg) } /*left*/
[pixel]::after { transform-origin: right; transform: rotateY(-90deg) } /*right*/
[pixel] > span { transform: translateZ(calc(var(--pixel-size) * -1)) } /*back*/
[pixel] > span::before { transform-origin: top; transform: rotateX(90deg) } /*top*/
[pixel] > span::after { transform-origin: bottom; transform: rotateX(-90deg) } /*bottom*/

/* shading */
[pixel]::after{ background-image: linear-gradient(rgb(0 0 0 / .25) 100%, transparent) }/*right*/
[pixel] > span::after { background-image: linear-gradient(rgb(0 0 0 / .375) 100%, transparent) }/*bottom*/

/*lighting*/
[pixel]::before { background-image: linear-gradient(rgb(255 255 255 / .25) 100%, transparent) }/*left*/
[pixel] > span::before { background-image: linear-gradient(rgb(255 .........完整代码请登录后点击上方下载按钮下载查看