css实现三维宇宙魔方变形动画效果代码-html代码-BFW代码库

css实现三维宇宙魔方变形动画效果代码

代码语言：html

所属分类：三维

代码描述：css实现三维宇宙魔方变形动画效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
.container {
	--c1:hsl(214deg 100% 50%);
	--c2:hsl(214deg 100% 30%);
	--c3:hsl(214deg 100% 15%);
	transform-style: preserve-3d;
	animation: s 1s infinite;
}
.maze {
	width: 200px;
	aspect-ratio: 1/1;
	display: grid;
	grid-template-columns: repeat(var(--n), 1fr);
	grid-auto-rows: 1fr;
	transform-style: preserve-3d;
}
.maze:first-child  {
    transform: translate(-50%,100%) rotate(-90deg) rotateX(90deg) translate(0,-50%);
}
.maze:last-child {
    transform: translate(0,-50%)rotate(90deg) rotateY(90deg) translate(50%);
} 
.maze > * {
	background: var(--c1);
	transform: translateZ(0px);
	transform-style: preserve-3d;
	--d: calc(var(--i) - var(--j));
	animation: t 2s calc(var(--d) * 0.2s) infinite;
}
.maze:first-child *{
	background: var(--c2);
}
.maze:last-child *{
	background: var(--c3);
}
.maze > *::before,
.maze > *::after {
	content: "";
	bottom: 0;
	left: 0;
	position: absolute;
}
.maze > *::before {
	width: 40px;
	top: 0;
	transform-origin: left;
	background: var(--c2);
	transform: rotateY(90deg);
}
.maze:first-child > *::before {
	background: var(--c3);
}
.maze:last-child > *::before {
	background: var(--c1);
}
.maze > *::after {
	height: 40px;
	right: 0;
	transform-origin: bottom;
	background: var(--c3);
	transform: rotateX(90deg);
}
.maze:first-child > *::after {
	background: var(--c1);
}
.maze:last-child > *::after {
	background: var(--c2);
}
@keyframes t {
	50% {
		transform: translateZ(10px);
	}
}
@keyframes s {
  0%,70%,100% {transform: translate(0,-30%) rotateX(65deg) rotateZ(-45deg)}
  75%,85%,95% {transform: translate(0,-32%) rotateX(65deg) rotateZ(-40deg)}
  80%,90%     {transform: translate(0,-31%) rotateX(70deg) rotateZ(-45deg)}
}
body {
	perspective: 70em;
	margin: 0;
	background: #000;
	min-height: 100vh;
	display: grid;    
  place-content: center;
	transform-style:preserve-3d;
}
</style>




</head>

<body >
  <div class="container" style="--n: 10">
  <div class="maze">
    <div style="--i: 0;--j: 0"></div>
    <div style="--i: 0;--j: 1"></div>
    <div style="--i: 0;--j: 2"></div>
    <div style="--i: 0;--j: 3"></div>
    <div style="--i: 0;--j: 4"></div>
    <div style="--i: 0;--j: 5"></div>
    <div style="--i: 0;--j: 6"></div>
    <div style="--i: 0;--j: 7"></div>
    <div style="--i: 0;--j: 8"></div>
    <div style="--i: 0;--j: 9"></div>
    <div style="--i: 1;--j: 0"></div>
    <div style="--i: 1;--j: 1"></div>
    <div style="--i: 1;--j: 2"></div>
    <div style="--i: 1;--j: 3"></div>
    <div style="--i: 1;--j: 4"></div>
    <div style="--i: 1;--j: 5"></div>
    <div style="--i: 1;--j: 6"></div>
    <div style="--i: 1;--j: 7"></div>
    <div style="--i: 1;--j: 8"></div>
    <div style="--i: 1;--j.........完整代码请登录后点击上方下载按钮下载查看